javascript - 使用 Javascript 解析具有不同值类型的 JSON

Question

我正在尝试解析一个 JSON 对象并使用数据构造一个字符串。我正在使用的示例对象如下所示：

{
    "age": 35,
    "name": "",
    "time": {
        "24hr": true,
        "12hr": false
    }
}

我希望输出看起来像这样：

age - 35
name
time - 24hr:true, 12hr:false

我遇到了一个问题，因为键具有不同的值类型。“age”有一个整数，“name”有一个空字符串，“time”有一个对象。

构建该输出的最简单方法是什么？

目前，我有一个 for 循环可以打印出键，但值显示不正确。

谢谢

Answer 1

大多数值类型都不应该有任何问题。

这是一个简单的例子，展示了如何在不使用递归的情况下做到这一点：

var o = {
    "age": 35,
    "name": "",
    "time": {
        "24hr": true,
        "12hr": false
    }
}, 
s = [],
x = [],
v, k, p;

for (k in o) {
   if (typeof (v = o[k]) === 'object') {
       s.push(k + ' - ');
       x.length = 0;
       for (p in v) {
           x.push(p + ':' + v[p]);
       }
       s.push(x.join(', ') + '\n');
   } else {
       s.push(k + ' - ' + v + '\n');
   }
}

console.log(s.join(''));

显然，您可以使用类似的方法来动态构造一些 HTML 结构而不是字符串。

Answer 2

演示 jsFiddle

HTML

<div>
    <span>age - </span>
    <span id='age'></span>
</div>
<div>
    <span>name - </span>
    <span id='name'></span>
</div>
<div>
    <span>time - 24hr: </span>
    <span id='24hr'></span>
    <span>, 12hr: </span>
    <span id='12hr'></span>
</div>

JS

window.onload=function(){
    var json = '{"age": 35,"name": "","time": {"24hr": true,"12hr": false}}';
    var jObject = eval("("+json+")");
    document.getElementById("age").innerHTML = jObject.age;
    document.getElementById("name").innerHTML = jObject.name;
    document.getElementById("24hr").innerHTML = jObject.time["24hr"];
    document.getElementById("12hr").innerHTML = jObject.time["12hr"];
};

注意：我强烈建议使用 JSON 解析器而不是 eval。

示例库：

1. JSON2
2. JSON.parse 有限支持

使用 JSON2 的示例

window.onload = function () {
    var json = '{"age": 35,"name": "","time": {"24hr": true,"12hr": false}}';
    var jObject = JSON.parse(json);
    document.getElementById("age").innerHTML = jObject.age;
    document.getElementById("name").innerHTML = jObject.name;
    document.getElementById("24hr").innerHTML = jObject.time["24hr"];
    document.getElementById("12hr").innerHTML = jObject.time["12hr"];
};