jQuery循环遍历JSON数组

Posted 2023-05-09

【中文标题】jQuery循环遍历JSON数组

【英文标题】：jQuery loop through JSON array

【发布时间】：2015-07-22 18:54:32

【问题描述】：

我有一个 json 数组，我通过 ajax 调用获取该数组并希望循环遍历它。 该数组输出一个类别标题和该类别中的一些数据记录。 数组如下：

"Travel":["title":"Beautiful title 1","title":"Beautiful title 2","title":"Beautiful title 3"],"Other":["title":"Beautiful title 1"]

基本的每个功能都帮不了我。

$.each(data, function(key, value) 
    console.log(value.title);

我希望能够将其与主要类别标题一起输出，并在其下显示数据记录。

例如，我希望它看起来像这样：

旅行（3 个结果）：

美丽的标题1 美丽的标题2 美丽的标题3 列表项

其他（1 个结果）：

美丽的标题1

任何帮助将不胜感激。谢谢。

【问题讨论】：

它不是一个对象而不是一个数组吗？还是我在这里遗漏了什么？

【参考方案1】：

var data = "Travel":["title":"Beautiful title 1","title":"Beautiful title 2","title":"Beautiful title 3"],"Other":["title":"Beautiful title 1"];

$.each(data, function (key, value) 
  $('body').append($('<div></div>').html(key + ' (' + value.length + ' results)'));
  var list = $('<ul></ul>');
  $('body').append(list);
  $.each(value, function (index, titleObj) 
    list.append('<li>' + titleObj.title + '</li>');
    
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【讨论】：

谢谢你，成功了，稍微修改了代码以满足我的需要。我已将您的答案标记为正确答案！

@Adriaan 谢谢 :) 很高兴我能帮上忙 :)

【参考方案2】：

您需要嵌套 .each()，因为数组包含嵌套对象。

$.each(data,function(i,object)
    console.log(i +'('+object.length+')')
    $.each(object, function (index, obj) 
        console.log(obj.title);
    );
);

Fiddle

【参考方案3】：

试试

$.each(data, function(key, value) 
  $("<ul />", 
    "class": key.toLowerCase(),
    "html": key + " (" + value.length + " results)<br />"
  ).append($.map(value, function(title, i) 
    return $("<li />", 
      "html": Object.keys(title)[0] + ":" + title.title
    )[0].outerHTML
  )).appendTo("body");
);

var data = 
  "Travel": [
    "title": "Beautiful title 1"
  , 
    "title": "Beautiful title 2"
  , 
    "title": "Beautiful title 3"
  ],
  "Other": [
    "title": "Beautiful title 1"
  ] 
;

$.each(data, function(key, value) 
  $("<ul />", 
    "class": key.toLowerCase(),
    "html": key + " (" + value.length + " results)<br />"
  ).append($.map(value, function(title, i) 
    return $("<li />", 
      "html": Object.keys(title)[0] + ":" + title.title
    )[0].outerHTML
  )).appendTo("body");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【参考方案4】：

其实你有他们的旅行钥匙

所以你可以这样做：

$.each(data.Travel,function(key, value)
    console.log(value.title);

【讨论】：

我不能，因为类别标题是从数据库中提取的，可能有 300 个不同的类别，所以我永远不会知道所有的标题，否则我早就这样做了。