将json对象拆分为数组,并为其中的每一个分配其他对象

时间:2014-07-08 12:34:37

标签: javascript jquery json split

Original Fiddle使用第一个JSON文件

Failed Fiddle使用第二个JSON文件。

我无法使用split$.each函数从数组中返回每个小选项。

我通过this site的AJAX使用链式选择框。它需要这样的标记来构建链式选择框:

<select>
    <option value="mustang2000">Ford » Mustang » 2000</option>
    <option value="mustang2005">Ford » Mustang » 2005</option>
    <option value="focus">Ford » Focus » 2010</option>
    <option value="alero">Oldsmobile » Alero » 1993</option>
</select>

通常,选项的JSON文件如下所示:

第一个JSON文件

[
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "football"
  },
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "basketball"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "MMA"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "wrestling"
  }
]

我希望使用“|”将相同类别的所有选项填充到一个大选项中作为分隔符,像这样:

第二个JSON文件

[
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "football|basketball"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "wrestling|racing"
  }
]

并在脚本中使用split$.each函数返回每个小选项

  $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FqMlPxn%22&format=json&diagnostics=true&callback=", 
        success: function(data){
               var $select = $('select');var $option="";

        $.each(data.query.results.json.json, function (index, i) {

          smallchoice = i.choice.split(',');
        $.each(smallchoice,function(i,smallchoice){
         $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
       });

           $select.append($option); 
          });


        $select.dynamicDropdown({"delimiter":"@"});
    } 
   });

但我不知道如何为每个小选项分配bigcatcat。谁能给我建议?

1 个答案:

答案 0 :(得分:4)

您尝试手动解析Json对象。 Jquery不需要这样做。 Jquery有一个内置的parseJson()方法,可以将格式良好的json对象转换为javascript对象。或者,正如Liam建议的那样,您还可以在$ .ajax()选项中指定dataType是json,它将自动解析对象的结果数据响应。

然后你也可以使用数组[&#34;摔跤&#34;,&#34;赛车&#34;]而不是| -delimited列表供您选择。这两种方法相结合可以为您提供很多帮助并简化您的代码。

总结一下:将dataType:"json",添加到a​​jax选项并使用数组存储选项而不是分隔列表。

(根据meta的建议更新评论)。