如何将JSON对象转换为数组以在jQuery中使用？

Question

我正在构建一个价格估算器表单,它使用jQuery来操作选择菜单.基本上,当选择新数量时,每个选择菜单中每个选项的值乘以每单位价格,并向用户显示新价格.

我想要做的是从PHP文件中提取每单位价格,该文件将这些价格存储在一系列数组中; 例如:

<?php
    // prices.php
    $colorPrices = array(2.339,3.195,6.537,2.614,2.614,1.759);
    $json = json_encode($colorPrices);
    echo $json;
?>

保持阵列分离将使我的jQuery更清洁,并使更容易更新定价.

在我的jQuery文件中,它计算总价格,我正在读这样的JSON:

$.getJSON('prices.php',function(data) {
    var colorArray = data;
})

在这一点上,colorArray是一个对象,所以它对这个jQuery并不好玩:

// whenever a new COLOR is chosen, step through colorArray and multiply by the currently selected QUANTITY
$('#colors option').each(function(i){
    $(this).attr('label',qty * colorArray[i]);
});

我的想法是,如果我可以将colorArray转换为数组,我可以遍历其内容.现在,当我选择一种新颜色时没有任何反应.

我是关闭还是无能为力？

Answer 1

colorArray将是表单的数组

[2.339, 3.195, 6.537, 2.614, 2.614, 1.759]

根据php json_encode()文档.

我已经整理了一个工作演示来演示如何将JSON字符串中返回的数据作为数组处理.添加/编辑 URL以查看代码.

演示代码

$(function() {

  $('button').click(function() {

    // the URL is just another page on jsbin.com that contains 
    // this string - ["2.339","3.195","6.537","2.614","2.614","1.759"]
    $.getJSON('http://jsbin.com/amibo', function(data) {

      $.each(data, function(i,v) {
        $('<div>').text(v).appendTo('body');
      });

    });

  });

});

请注意,在您的示例中,colorArray在AJAX请求完成时执行的函数内部声明,因此在该范围之外不可用.您可以使用更高范围的变量来捕获返回的数据,也可以在回调函数内执行迭代.

编辑:

我在这里查看了你的代码,你需要这样的东西

$('#quantity').change(function() {

  var qty = $('option:selected', this).val();

  switch (qty) {
    case '250':
      $.getJSON('scripts/jsondata.php',function(data) {

        // call the new updateOptionLabels function
        updateOptionLabels(qty, data);


        // I'm not sure if you needed this part as it seems to
        //  essentially duplicate the new updateOptionLabels function
        // I've commented out but I may misunderstand what you're doing
        /*
        $.each(data, function(i, value) {
          $('#colors option').eq(i).attr('label',qty * value);
        });
        */

      });    
      break;

    case '500':
      // ditto, but retrieving a different array
      break;

    // etc...
    default:
      alert("Default");
      break;
  }


  // I'd like to use that local "colorArray" variable here
  function updateOptionLabels(qty, arr) {
    $('#colors option').each(function(i) {
      $(this).attr('label',qty * arr[i]);
    });
  }


}); 

我已经介绍了一个用于更新选项标签的新功能.此函数的范围限定为<select>使用id 引发更改事件时执行的函数quantity.变量qty可以在回调函数内部用于getJSON()每个case语句中的命令,因为它是在回调函数范围之外声明的.该data变量和qty都传递到updateOptionLabels()功能,使这个代码是不是在每个case语句复制.这可能会提前完善.我$.each()暂时评论了这一点,因为看起来你正在尝试用它做什么,现在由updateOptionLabels()功能处理.

我建议看一下Doug Crockford 对JavaScript编程语言的优秀调查,特别是关于函数的部分.另请参阅Mozilla优秀的Core JavaScript 1.5参考资料.这是关于函数和函数范围的部分