Json array inside array, to make them as title with childrens

Question

For my case, I have a json file stored much of cates. Then, each cate has different amount of subject inside.

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

I used $.each to get all the data result. But I don't know how to make them like Title->Subject(s) list, Title->Subject(s) list, Title->Subject(s) list... My json structure is:

{
    "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"
                }
            ]
        }
    ]
}

The html structure must output like that:

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

Very thanks for answer my question!

Nenad Vracar · Accepted Answer · 2017-10-25T09:13:03.927

1

You can use forEach() and map() to loop and build data and then appendTo to append to elements.

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)
})

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

edited Oct 25 '17 at 09:13

answered Oct 24 '17 at 19:02

Nenad Vracar

118,580
15
151
176

Another question is about your code, this is first time I see "$('
')". Is this style of coding will automatically close the element tag?
– Samson Oct 25 '17 at 06:13
Its better to close it but i guess you don't have to, you can read few questions about that https://stackoverflow.com/questions/10757482/creating-an-empty-element-with-start-tag-vs-self-closing-tag, https://stackoverflow.com/questions/13917043/closing-created-jquery-elements, https://stackoverflow.com/questions/6555898/jquery-when-creating-a-new-element-do-i-need-the-ending-taghttps://stackoverflow.com/questions/6555898/jquery-when-creating-a-new-element-do-i-need-the-ending-tag – Nenad Vracar Oct 25 '17 at 09:12
Thanks, but I don't know what is this mean "(e.subjects.map(s => '
' + s.subjectName + '

Samson

Oct 25 '17 at 11:16

`s` is current element in map method loop, so for each element you take subject name and wrap it in `li` – Nenad Vracar Oct 25 '17 at 11:17

`=>` is what meaning? – Samson Oct 25 '17 at 11:22

That is just arrow function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Nenad Vracar Oct 25 '17 at 11:28

Oh, this is a short form, how about don't use arrow function, how its look like? Because I still not too understand about that. Thank you. – Samson Oct 25 '17 at 11:37

Roman Habibi · Answer 2 · 2017-10-24T19:30:25.023

If you are sure about the depth of the JSON you can simply map the json object to html, the code below is not requiring jquery and is triggering browser to reflow only once.

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 array inside array, to make them as title with childrens

2 Answers2