Question

您好我是JavaScript新手，我需要将这个JavaScript对象（伪JSON）显示在HTML页面的div中，我无法使用jQuery，任何人都可以帮忙。

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

Answer 1

如果您希望正确格式化数据，JSON.stringify本身就会为您执行此操作。因此，在下面的示例中，您可以看到我们传入数据（忽略第二个参数，这是一个解析字符串的替换器函数）和所需的格式空间数（在本例中为2）。

＆＃13;

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>';

＆＃13;

pre {
  background-color: #eee;
}

＆＃13;

<div id="target"></div>

＆＃13;

document.getElementById('target').innerHTML使用`id =＆＃34; target＆＃34;;

设置元素的html内容

<pre>标记保留空白格式，<code>标记告诉浏览器按原样呈现。

Answer 2

    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));

Answer 3

不确定要在div中显示哪些数据。 data是object，而music是data的关键。 data.music将返回音乐数组。然后使用forEach数组方法遍历数组。

希望此代码段有用

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

Answer 4

您需要使用点表示法。见下面的代码

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

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

See jsfiddle attached

Answer 5

你的JS就像

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

将格式化的JavaScript显示为HTML中的内容

5 个答案: