JQuery / Javascript循环遍历JQuery Mobile滑块并从其值创建JSON字符串

时间:2013-09-13 14:28:28

标签: javascript jquery json jquery-mobile

在我的控制器中,我动态创建滑块html以传递给我的视图 - 所以我最终得到了多个滑块(可能是1个滑块,可能是20个,或者介于两者之间的任何数字 - 取决于来自数据库的查询) 。

我需要将每个滑块与数据库中的ID以及价格相关联。

ExtraPrices数组保存与每个滑块关联的价格。 ExtraIDs数组包含数据库中每个额外项的ID。

我想创建一个JSON字符串,它保存每个滑块的设置,并且也使用ExtraPrice和ExtraID,这样我就有了一个JSON字符串,我可以发回我的代码。

HTML输出是:

 <script>
     var ExtraPrices = [20.00,30.00,50.00];
     var ExtraIDs = [13,19,25];
 </script>

  <label for="slider1">item 1</label>
  <input type="range" name="slider1" id="slider1" min="0" max="10" value="0">
  <label for="slider2">item 2</label>
  <input type="range" name="slider2" id="slider2" min="0" max="10" value="0">
  <label for="slider3">item 3</label>
  <input type="range" name="slider3" id="slider3" min="0" max="10" value="0">

我需要能够循环遍历两个数组,并将它们与相对滑块值绑定。 Psuedo代码:

var count = 0;
var strJSon = "["
"RoomName": null,";

$.each('#slider').function(){
    strJSon+= "{"
    strJSon+= "\"ID\": " + ExtraIDs[count] + ",";
    strJSon+= "\"Price\": " + ExtraPrices[count] + ",";
    strJSon+= "\"Number\": " + SliderX.slider("option", "value");
    strJSon+= "},"
}

//Remove last comma
strJSon = strJSon.Substring(0, strJSon.LastIndexOf(","));
strJSon+= "]"

所以我最终得到的strJSon类似于:

[{
"ID":13,"Price":20.00,"Number":4,
"ID":19,"Price":20.00,"Number":2,
"ID":25,"Price":20.00,"Number":5
}]

任何人都可以通过我上面的Javascript代码帮助您遍历每个滑块,并构建上面提到的JSON字符串吗?

谢谢,

标记

1 个答案:

答案 0 :(得分:5)

不要自己构建JSON,创建一些对象,将它们添加到数组中,然后JSON.stringify结果。

var arr = [];

$.each('#slider').function(i) {
  var obj = {
    id: ExtraIDs[count],
    price: ExtraPrices[count],
    number: window['Slider' + i].slider("option", "value")
  };
  arr.push(obj);
});

JSON.stringify(arr);