CODEWITHSUNDEEP
javascriptjsonrecursion
DerekW
DerekW

Reputation: 31

Convert nested json to html

I've been given the task of taking a json object(it will not be this one, could be more or less nested and content) and writing a function that will parse it out and append it to a html page. Specifically they will give me a file that looks like this that I will have to take the data from. It could be one level deep or 15 levels deep. I just dont know where to begin. I know I should either use recursion r a while loop but past that im completely lost.

Any help or pointers in the right direction would be helpful, thanks.

    [
  {
    "tag": "section",
    "content": {
      "tag": "h2",
      "content": "Welcome to My Page!"
    }
  },
  {
    "tag": "section",
    "content": [
      {
        "tag": "h3",
        "content": "My Favorite Things"
      },
      {
        "tag": "ul",
        "content": [
          {
            "tag": "li",
            "content": "<img src='http://placekitten.com/g/200/200'/>"
          },
          {
            "tag": "li",
            "content": "<img src='http://placekitten.com/g/201/200'/>"
          },
          {
            "tag": "li",
            "content": "<img src='http://placekitten.com/g/200/201'/>"
          }
        ]
      },
      {
        "tag": "p",
        "content": [
          {
            "tag": "span",
            "content": "In short, I "
          },
          {
            "tag": "strong",
            "content": "just love"
          },
          {
            "tag": "span",
            "content": " kittens!"
          }
        ]
      }
    ]
  }
]

Upvotes: 0

Views: 2431

Answers (3)

Per Hornsh&#248;j-Schierbeck
Per Hornsh&#248;j-Schierbeck

Reputation: 15196

This looks like a job for a template framework. There are many out there and some are good if the user needs to be able to edit the values and some are great (easy to use) if you only need to display your data (one way binding).

Personally i'd use a framework like Angular (Angular1 or Angular2) since they are complete framework and can help you with a lot of stuff. That said, both might be overkill, especially if you're not familiar with them and only need to create some html from the json.

The simpler solution would be to use a template system like Mustache or Handlebars. Both are great template systems - the latter builing on top of the other.

Good luck - I'm sure it's going to be fun and somewhat easier than you're fearing. Since you mentioned recursion, yes use that, but let the frameworks do it for you - less trouble and less error prone :)

Upvotes: 0

pumbo
pumbo

Reputation: 3826

Here it is: https://jsfiddle.net/ej4ftzcs/

// A recursive function to build DOM tree from a json structure
function buildTree(tree, container) {  
  tree.forEach(function(node) {

    var el = document.createElement(node.tag);

    if (Array.isArray(node.content)) {
        buildTree(node.content, el);
    } 
    else if (typeof(node.content) == 'object') {
        buildTree([node.content], el);
    }
    else {
        el.innerHTML = node.content;
    }

    container.appendChild(el);
  });
}

// Run !!!
buildTree(tree, document.body);

Upvotes: 4

WIPocket
WIPocket

Reputation: 78

Use the document.createElement("tag"); function to create an element in your memory (var element = document.createElement(currentLevel.tag);) Than you can use element.appendChild(otherelement); to put something inside of it. You can check what is the "content"s type (string or array) by checking if typeof currentLevel.content is "object" or "string".

When it comes writing it down, than just get the element you want it in and targetElement.appendChild(element); it inside. If you however want just the html code, than var HTMLcode = element.outerHTML;

Upvotes: 0

Related Questions