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ć
– Irena Vilić, Commented Nov 14, 2018 at 13:24
What makes this hard is the fact titles should be an array, but for some reason it is not. — epascarello
– epascarello, Commented Nov 14, 2018 at 13:27

SAMUEL · Accepted Answer · 2018-11-14 14:16:19Z

2

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>

edited Nov 14, 2018 at 14:16

answered Nov 14, 2018 at 13:34

SAMUEL

8,6323 gold badges46 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Schultheiss Over a year ago

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 Over a year ago

NOTE I DO like the filter on the Object.keys here and was thinking along those lines.

SAMUEL Over a year ago

@MarkSchultheiss updated based on comments and his question

Mark Schultheiss Over a year ago

Great! this will now also work if the JSON is from ajax and renders in a return from that. Good change.

Jyothi Babu Araja · Accepted Answer · 2018-11-14 13:49:56Z

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>

Collectives™ on Stack Overflow

How to show JSON with JavaScript?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related