CODEWITHSUNDEEP
javascriptjqueryjson
eozzy
eozzy

Reputation: 68680

Parsing JSON as HTML nested list

JSON:

{
  "Item 1": [
    9,
    {
      "Item 1.1" : 19,
      "Item 1.2" : 29,
      "Item 1.3" : 39
    }
  ],
  "Item 2": 49,
  "Item 3": [
    59,
    {
      "Item 3.1" : 69,
      "Item 3.2" : 79,
      "Item 3.3" : 89
    }
  ]
}

Desired HTML:

<ul class="list">
    <li class="item">
        <a data-page="9">Item 1</a>
        <ul>
            <li><a data-page="19">Item 1.1</a></li>
            <li><a data-page="29">Item 1.2</a></li>
            <li><a data-page="39">Item 1.3</a></li>
        </ul>
    </li>
    <li class="item"><a data-page="49">Item 2</a></li>
    <li class="item">
        <a data-page="59">Item 3</a>
        <ul>
            <li><a data-page="69">Item 3.1</a></li>
            <li><a data-page="79">Item 3.2</a></li>
            <li><a data-page="89">Item 3.3</a></li>
        </ul>
    </li>
</ul>

My attempt (http://jsbin.com/duxoyitifa/edit?js,console,output):

$(document).ready(function() {

  var json = '{"Item 1":[9,{"Item 1.1":19,"Item 1.2":29,"Item 1.3":39}],"Item 2":49,"Item 3":[59,{"Item 3.1":69,"Item 3.2":79,"Item 3.3":89}]}';

  var obj = $.parseJSON( json );
  //console.log(obj);  
  var items = [];

  $.each( obj, function( k1, v1 ) {
    console.log("k1: " + k1);
    console.log(v1);
    items.push('<li class="item">');

    $.each( v1, function( k2, v2 ) {
      console.log(v2);
      items.push('<a data-page="'+v2+'">'+k1+'</a>');

      $.each (v2, function( k3, v3 ) {
        console.log(v3);
      });

    });
    items.push('</li>');
    //items.push('<li class="item">');
    //items.push('<a data-page="'+n+'">'+key+'</a>');
    //items.push('</li>');

    $("body").append(items.join( "" ));

  });

});

I can't figure how to get the n and the sub-list from inside the nested object.

Upvotes: 1

Views: 103

Answers (2)

bcdan
bcdan

Reputation: 1428

A recursive function would be would be needed.

(some pseudocode while I figure out an exact solution)

function parseForm(json){
  var string = "";
  function parseElement(j){
    if(j.constructor === Object){
      //write element to "string"
      for(var i=0; i<j.length; i++){
        parseForm(j[i]);
      }
      //write end tag
    }else if(j.constructor === Array){
      //write element
      for(var i in j){
        parseForm(j[i]);
      }
      //write end tag
    }else{
      //write
    }
  }

  parseForm(json);

  return string;
}

This goes through at infinite depth. The key to this solution is sandwiching the recursive part in between the start/end tags. I do not know exactly what the rules are for formatting; I will let you figure out the specific details.

Upvotes: 0

wolfhammer
wolfhammer

Reputation: 2661

$(document).ready(function() {

  var json = '{"Item 1":[9,{"Item 1.1":19,"Item 1.2":29,"Item 1.3":39}],"Item 2":49,"Item 3":[59,{"Item 3.1":69,"Item 3.2":79,"Item 3.3":89}]}';

  var obj = $.parseJSON(json);
  //console.log(obj);  
  var items = [];

  function eachObj(obj) {
    $.each(obj, function(key, value) {
      console.log("iteration start");
      console.log(key, value);
      console.log("iteration end");

      items.push('<li class="item">');
      if (value != null && Array.isArray(value)) {
        items.push('<a data-page="' + value[0] + '">' + key + '</a>');
        items.push('<ul>');
        eachObj(value[1]);
        items.push('</ul>');
      } else {
        items.push('<a data-page="' + value + '">' + key + '</a>');
      }
      items.push('</li>');
    });
  }

  eachObj(obj);

  $('ul.list').html(items.join(""));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
</ul>

Upvotes: 3

Related Questions