How to parse and output JSON to HTML using JavaScript?

You need to parse JSON, which is located on another website, and after reading this json and output a table in html on the website.
I think that you can do it using the javascript method JSON.parse, but have never worked with JavaScript and found no example of it parsing the site url.
And do not fully understand how to output using innerHTML \ outerHTML

Please help. How easy it is to implement and if there are examples, would be ideal.
Thanks in advance!
June 27th 19 at 15:20
2 answers
June 27th 19 at 15:22
well, something like that with jquery
$.getJSON(url_json, function(data){
 $.each(data.items, function(key, val) {

// iterating through the array

June 27th 19 at 15:24
For example:
var data = {
 name: 'Jack',
 items: {
 dog: 1,
 car: 1,
 phone: 2,

// the object in json
var json = JSON.stringify(data); // {"name":"Jack","items":{"dog":1,"car":1,"phone":2}}

// json object
var obj = JSON.parse(json); // object

When we get the json converted into an object, and then depending on the data structure
var data = JSON.parse('{"name":"Jack","items":{"dog":1,"car":1,"phone":2}}');

var header = '<h2>My name is ' + + '</h2>';
var list = ";

for (var i in data.items) {
 list += '<li>' + i + ': '+ data.items[i] + ' PCs </li>';

document.getElementById('div').innerHTML += header;
document.getElementById('div').innerHTML += '<ul>' + list + '</ul>';

// Of course, it is better to create elements using
// var div = document.createElement('div');
// fill using div.innerHTML = "text";
// and add them via element.appendChild(div);


Find more questions by tags HTMLJavaScriptJSON