Question

我有一个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

非常感谢任何帮助。谢谢。

Answer 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>

Answer 2

尝试

$.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>

Answer 3

您需要嵌套的multiline，因为数组包含嵌套对象。

.each()

<强> Fiddle

Answer 4

实际上你有一个旅行钥匙

所以你可以这样做：

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

jQuery循环通过JSON数组

4 个答案: