-2

Hi I am new to JavaScript and I need to show this JavaScript object (pseudo-JSON) into a div on a HTML page, I can't use jQuery can anyone help please.

var data = {
    "music": [
        {
        "id": 1,
        "artist": "Oasis",
        "album": "Definitely Maybe",
        "year": "1997"
        },
    ]
}
Michael
  • 7,348
  • 10
  • 49
  • 86
Sublize
  • 1
  • 1

5 Answers5

1

If you want your data to be properly formatted, JSON.stringify will natively do this for you. So in the example below, you can see we pass in the data (ignore the second argument, this is a replacer function to parse the string) and the number of formatting spaces required (in this case 2).

var data = {
  "music": [{
    "id": 1,
    "artist": "Oasis",
    "album": "Definitely Maybe",
    "year": "1997"
  }, ]
};


document.getElementById('target').innerHTML = '<pre><code>' + JSON.stringify(data, null, 2) + '</code></pre>';
pre {
  background-color: #eee;
}
<div id="target"></div>

document.getElementById('target').innerHTML sets the html content of an element with `id="target";

The <pre> tag preserves whitespace formatting and the <code> tag tells the browser to render as is.

paddybasi
  • 82
  • 5
0
    function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp; }

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    }); }

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]}; var str = JSON.stringify(obj, undefined, 4);

output(str); output(syntaxHighlight(str));
Apostolos
  • 10,033
  • 5
  • 24
  • 39
Ranjan
  • 929
  • 1
  • 6
  • 19
0

Not sure which data you want to show in the div. data is an object while music is a key to data. data.music will return the music array. Then use forEach array method to loop through the array.

Hope this snippet will be useful

var data = {
    "music": [
        {
        "id": 1,
        "artist": "Oasis",
        "album": "Definitely Maybe",
        "year": "1997"
        },
    ]
}

var _getData = data.music // will return music array;
_getData.forEach(function(item){
document.write('<pre>'+item.id+'</pre>')
})

JSFIDDLE

brk
  • 48,835
  • 10
  • 56
  • 78
  • I was missing the object reference, this was very helpful. – Sublize Jul 13 '16 at 11:46
  • @Sublize happy to help. `document.write` was use just for demonstration in your application you must use **innerHTML** to populate the div – brk Jul 13 '16 at 11:47
0

You need to use dot notation. See code below

var data = {
    "music": [
        {
        "id": 1,
        "artist": "Oasis",
        "album": "Definitely Maybe",
        "year": "1997"
        },
    ]
};

$('p').text(data.music[0].artist);

See jsfiddle attached

  • Thank you i was missing the object reference, in the work i was doing, obviously just a silly mistake. – Sublize Jul 13 '16 at 11:41
-1

Your JS be like

var data = {
    "music": [
        {
        "id": 1,
        "artist": "Oasis",
        "album": "Definitely Maybe",
        "year": "1997"
        },
    ]
}

var item = data.music;
  for(var i = 0; i<item.length; i++){
  document.write(item[i].id + ", " + item[i].artist);
  document.write(item[i].album);
}

JSFiddle

Ataur Rahman Munna
  • 3,887
  • 1
  • 23
  • 34