How to show JSON with JavaScript?

Question

I am currently researching the JSON and JS (JSON.parse()). Firstly, I need to write this text through JSON and then to show it with JavaScript in HTML in this format (as a list). I know how to show the first artist but don't know how to show the rest of them.

<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>

<script>

var json =[{
        "name": "Deep purple",
        "title1": "Machine Head",
        "title2": "Stormbringer"
    },
    {
        "name": "Joe Satriani",
        "title1": "Flying in a Blue Dream",
        "title2": "The Extremist",
        "title3": "Shockwave Supernova"
    },
    {
        "name": "Snoop Dogg",
        "title1": "The Doggfather",
        "title2": "Snoopified"
    }
];



var obj = JSON.parse(json);
document.getElementById("demo").innerHTML = '<ul><li>'+ obj[0].name+ '</li>';   //what now???

</script>

</body>
</html>

Any advice would be helpful.

I know I need a loop but don't know how to write that. I'm new with js. — Irena Vilić, Nov 14 '18 at 13:24
What makes this hard is the fact titles should be an array, but for some reason it is not. — epascarello, Nov 14 '18 at 13:27
Please check this post: https://stackoverflow.com/questions/19529403/javascript-loop-through-object-array — Dennis, Nov 14 '18 at 13:28
You should render this server side if it is just placed in the document as you have it here. your `json` is not really JSON it is a JavaScript Object not a string that can be parsed. — Mark Schultheiss, Nov 14 '18 at 13:51

samuelj90 · Answer 1 · 2018-11-14T14:16:19.567

var json = [{
    "name": "Deep purple",
    "title1": "Machine Head",
    "title2": "Stormbringer"
  },
  {
    "name": "Joe Satriani",
    "title1": "Flying in a Blue Dream",
    "title2": "The Extremist",
    "title3": "Shockwave Supernova"
  },
  {
    "name": "Snoop Dogg",
    "title1": "The Doggfather",
    "title2": "Snoopified"
  }
];
json.forEach((jsonObject) => {
  var name = jsonObject.name;
  var titles = [];
  Object.keys(jsonObject).filter((key) => {
    return key.startsWith("title")
  }).forEach((title) => {
    titles.push(jsonObject[title]);
  })
  var root = document.getElementById("demo");
  render(root, titles, name)
});

function render(root, array, name) {
  var nameElement = document.createElement('h3');
  nameElement.innerHTML = name;
  root.appendChild(nameElement)
  var ul = document.createElement('ul');
  var array;
  root.appendChild(ul); // append the created ul to the root
  array.forEach(function(item) {
    li = document.createElement('li'); // create a new list item
    li.appendChild(document.createTextNode(item)); // append the text to the li
    ul.appendChild(li); // append the list item to the ul
  });
}

<html>

<body>
  <h2>Artists</h2>
  <div id="demo"></div>
</body>

</html>

probably `key.startsWith("title")` to be not equal to "name" instead? Also might be better to create `ul` elements append child `li` elements then append the whole thing to the DOM at the end. — Mark Schultheiss, Nov 14 '18 at 13:44
NOTE I DO like the `filter` on the `Object.keys` here and was thinking along those lines. — Mark Schultheiss, Nov 14 '18 at 13:54
Great! this will now also work if the JSON is from ajax and renders in a return from that. Good change. — Mark Schultheiss, Nov 14 '18 at 15:39

score 1 · Accepted Answer · answered Nov 14 '18 at 13:49

Without using document.write.

You can loop through JSON using for, forEach and a more functional way is using Array.map. You can generate your content to append the desired DOM element (div#demo in your case).

var json = [{
    "name": "Deep purple",
    "title1": "Machine Head",
    "title2": "Stormbringer"
  },
  {
    "name": "Joe Satriani",
    "title1": "Flying in a Blue Dream",
    "title2": "The Extremist",
    "title3": "Shockwave Supernova"
  },
  {
    "name": "Snoop Dogg",
    "title1": "The Doggfather",
    "title2": "Snoopified"
  }
];


var content = json.map(function(obj){
  var con = "<h3>" + obj.name + "</h3>";
  con += "<ul>";
  con += Object.keys(obj).map(function(key){
      return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
  }).join('');
  con += "</ul>";
  return con;
}).join('');
document.getElementById("demo").innerHTML = content;

<h2>Artists</h2>
<div id="demo"></div>

How to show JSON with JavaScript?

2 Answers2