Question

对于我的情况，我有一个json文件存储了很多cates。然后，每个美食都有不同的主题。

I made a simulate on codepen, the code and json also stored there

我使用$.each来获取所有数据结果。但我不知道如何使它们像Title-＆gt;主题列表，标题 - ＆gt;主题列表，标题 - ＆gt;主题列表... 我的json结构是：

{
    "cate": [
        {
            "cateName": "Cate 1",
            "subjects": [
                {
                    "subjectName": "Subject 1"
                },
                {
                    "subjectName": "Subject 2"
                }
            ]
        },
        {
            "cateName": "Cate 2",
            "subjects": [
                {
                    "subjectName": "Subject 1"
                },
                {
                    "subjectName": "Subject 2"
                },
                {
                    "subjectName": "Subject 3"
                },
                {
                    "subjectName": "Subject 4"
                }
            ]
        },
        {
            "cateName": "Cate 3",
            "subjects": [
                {
                    "subjectName": "Subject 1"
                },
                {
                    "subjectName": "Subject 2"
                },
                {
                    "subjectName": "Subject 3"
                }
            ]
        }
    ]
}

html结构必须输出：

<div id="mobileCateContainer">
  <div class="cate">
    <span class="cateHead">Cate 1</span>
    <div class="cateBody">
      <ul>
        <li>Subject 1</li>
        <li>Subject 2</li>
      </ul>
    </div>
  </div>
  <div class="cate">
    <span class="cateHead">Cate 2</span>
    <div class="cateBody">
      <ul>
        <li>Subject 1</li>
        <li>Subject 2</li>
        <li>Subject 3</li>
        <li>Subject 4</li>
      </ul>
    </div>
  </div>
  <div class="cate">
    <span class="cateHead">Cate 3</span>
    <div class="cateBody">
      <ul>
        <li>Subject 1</li>
        <li>Subject 2</li>
        <li>Subject 3</li>
      </ul>
    </div>
  </div>
</div>

非常感谢您回答我的问题！

Answer 1

您可以使用forEach()和map()来循环和构建数据，然后使用appendTo附加到元素。

＆＃13;

var data = {"cate":[{"cateName":"Cate 1","subjects":[{"subjectName":"Subject 1"},{"subjectName":"Subject 2"}]},{"cateName":"Cate 2","subjects":[{"subjectName":"Subject 1"},{"subjectName":"Subject 2"},{"subjectName":"Subject 3"},{"subjectName":"Subject 4"}]},{"cateName":"Cate 3","subjects":[{"subjectName":"Subject 1"},{"subjectName":"Subject 2"},{"subjectName":"Subject 3"}]}]}

var p = $('#mobileCateContainer');

var html = data.cate.forEach(function(e) {
  var cate = $('<div class="cate" />')
  
  $('<div class="cateHead" />')
    .text(e.cateName)
    .appendTo(cate)
  
  $('<div class="cateBody" />')
    .append($('<ul />').html(e.subjects.map(s => '<li>' + s.subjectName + '</li>' )))
    .appendTo(cate)
  
  p.append(cate)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mobileCateContainer"></div>

＆＃13;

Answer 2

如果您确定JSON的深度，您可以简单地将json对象映射到html，下面的代码不需要jquery，并且只触发浏览器重排一次。

document.getElementById("mobileCateContainer").innerHTML = data.cate.map(mapCates).join('');

function mapCates(obj){
     var catestart = '<div class="cate">'+
    '<span class="cateHead">'+obj.cateName+'</span>'+
    '<div class="cateBody"><ul>';
    var cateSubjects = obj.subjects.map(mapSubjects).join('');
    var cateend =  '</ul></div></div>';
  return catestart + cateSubjects + cateend;
}

function mapSubjects(obj){
        return '<li>'+ obj.subjectName + '</li>';
}

数组内的Json数组，使它们成为带有子项的标题

2 个答案: