使用JavaScript迭代JSON数据以构建按字母顺序排列的列表

Question

我的JavaScript应用从我的后端PHP应用程序接收JSON数据。我需要创建一个页面，列出我的所有标记记录，按标记标题开头的字母表排列到列表中。

我的PHP以每个字母的格式返回JSON，在每个字母下面我都有我的标记记录，这些记录以这样的字母开头：

{
   "A":[

   ],
   "B":[

   ],
   "C":[
      {
         "id":"3",
         "title":"CSS",
         "description":""
      },
      {
         "id":"6",
         "title":"CSS3",
         "description":"CSS3 description"
      }
   ],
   "D":[

   ],
   "E":[

   ],
   "F":[

   ],
   "G":[

   ],
   "H":[

   ],
   "I":[

   ],
   "J":[
      {
         "id":"2",
         "title":"JavaScript",
         "description":""
      }
   ],
   "K":[

   ],
   "L":[
      {
         "id":"4",
         "title":"Laravel",
         "description":""
      }
   ],
   "M":[

   ],
   "N":[

   ],
   "O":[

   ],
   "P":[
      {
         "id":"1",
         "title":"PHP",
         "description":""
      }
   ],
   "Q":[

   ],
   "R":[

   ],
   "S":[

   ],
   "T":[

   ],
   "U":[

   ],
   "V":[

   ],
   "W":[

   ],
   "X":[

   ],
   "Y":[

   ],
   "Z":[

   ]
}

根据我上面的JSON数据，我如何迭代它并使用每个字母的Letter标题和每个字母下面的<ul>列表构建HTML，列出该字母下的标签？

Answer 1

我通过下面的代码得到了我需要的东西，任何改进总是值得欢迎。

<table border="1" width="500">
    <tbody>
  <tr bgcolor="red">
    <td  idth="10%">&nbsp;</td>
    <td width="80%" colspan="2">&nbsp;</td>
    <td width="10%">&nbsp;</td>
  </tr>
  <tr bgcolor="green">
    <td width="50%" colspan="2">&nbsp;</td>
    <td width="50%" colspan="2">&nbsp;</td>
  </tr>
  <tr bgcolor="blue">
    <td  width="100%" colspan="4">&nbsp;</td>
    </tr>
  </tbody>
</table>

var letters = {
  "A": [

  ],
  "B": [

  ],
  "C": [{
    "id": "3",
    "title": "CSS",
    "description": ""
  }, {
    "id": "6",
    "title": "CSS3",
    "description": "CSS3 description"
  }],
  "D": [

  ],
  "E": [

  ],
  "F": [

  ],
  "G": [

  ],
  "H": [

  ],
  "I": [

  ],
  "J": [{
    "id": "2",
    "title": "JavaScript",
    "description": ""
  }],
  "K": [

  ],
  "L": [{
    "id": "4",
    "title": "Laravel",
    "description": ""
  }],
  "M": [

  ],
  "N": [

  ],
  "O": [

  ],
  "P": [{
    "id": "1",
    "title": "PHP",
    "description": ""
  }],
  "Q": [

  ],
  "R": [

  ],
  "S": [

  ],
  "T": [

  ],
  "U": [

  ],
  "V": [

  ],
  "W": [

  ],
  "X": [

  ],
  "Y": [

  ],
  "Z": [

  ],
  "Other": [{
    "id": "7",
    "title": "1 Non Letter Tag",
    "description": "1 Non Letter Tag"
  },
  {
    "id": "8",
    "title": "_Another non letter tag",
    "description": "_Another non letter tag"
  }]
};

var html = '';
for (var letter in letters) {
  html += '<h2>' + letter + '</h2><ul>';
  for (var bar in letters[letter]) {
    html += '<li><a href="#" class="tag-link" data-id="' + letters[letter][bar]['id'] + '" data-title="' + letters[letter][bar]['title'] + '">' + letters[letter][bar]['title'] + '</a>' +
      '<br><div class="tag-description">' + letters[letter][bar]['description'] + '</div></li>';
  }
  html += '</ul>';
}
$('#tags-by-letter').html(html);

#tags-by-letter{
columns: 10em;
}

Answer 2

您的数据包含对象内的对象。你必须在里面重申

 $.each(data, function(i, obj) {
      html = "<ul>";
       $.each(obj, function(j, obj1) {
            html += "<li>";
         }
   });