Javascript 如何在html中将JSON显示为格式化视图

我需要在html页面中以格式化视图的形式查看JSON。JSON来自数据库。我需要在格式化视图中显示它

就像

 {
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}] 
}

有人有什么想法或建议吗？或者任何可能有用的资源

编辑：我想创建一个JSON解析器。用户输入不同的json，可以在格式化视图中查看

试试JSON.stringify（data），它是一个Javascript函数。希望能有所帮助

参考：

如果您使用的是PHP，那么就使用json_encode

请参阅：

由于您使用的是angular js，您只需从控制器加载JSON提要，然后使用

ng repeat

函数将项目迭代到视图页面中即可。下面是一个示例，其中介绍了HTML视图的外观，您可能需要根据需要设置块的样式和构建块：

项目：
[


{

年份：{{item.year}}

船：{{item.boat}}

位置：{{item.position}}

}

---

您可以在此中找到一个工作示例。

首先：您的远程JSON无效：它缺少

工作人员的结束括号

应该是这样的:

{
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}] // Missing this bracket
}

您没有提到您的JSON是否是远程的。我假设不是，所以在这个示例代码中，我将使用带有
eval
函数的本地JavaScript变量

<script type="text/javascript">

var content = {
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}]
};

var json = eval(content);

for (c in json.crews) {
    var crew = json.crews[c];
    for (i in crew.items) {
        var item = crew.items[i];
        console.log(item.year);
        console.log(item.boat);
        console.log(item.position);
        console.log(item.name);
    }
}

</script>


变量内容={
“船员”：[{
“项目”：[
{
“年份”：“2013年”，
“船”：“蓝色”，
“职位”：“1”，
“姓名”：“Patrick Close”，
“学院”：“彭布罗克”，
“重量”：“14磅2磅”
}, {
“年份”：“2013年”，
“船”：“蓝色”，
“职位”：“2”，
“姓名”：“乔治·麦克劳德”，
“学院”：“基督教堂”，
“重量”：“第13次10磅”
}]
}]
};
var json=eval（内容）；
for（json.crews中的c）{
var crew=json.crews[c]；
适用于（船员项目中的i）{
var项目=机组项目[i]；
控制台日志（项目年份）；
控制台。日志（项目。船）；
控制台日志（项目位置）；
console.log（item.name）；
}
}

我正在使用
console.log
进行输出，因此只有在打开浏览器控制台时才能看到数据：

我在java中使用angular js和服务器端。在这种情况下，我建议使用JSON.stringify（）。如果问题已经解决，请将此答案标记为正确。您的答案不是解决方案…您的答案只是一个建议。如果它工作正常，我将标记为答案。您在html中使用了item.year、item.boat。但我需要动态。JSON可以在DB中修改。然后应该在html中查看。JSON美化+
标记？
导出函数jsonToHtml（json）{return”“+json.stringify（json，null，4）+”“；}
首先，我想以任何格式解析json。它来自数据库。您的代码针对特定格式进行了固定。更具体地说，我想创建一个json解析器。当然，应该更改
for
循环中的内容以匹配您的需要。这只是一个示例！for（json.crews中的c）{var crew=json.crews[c]；for（i in crew.items）{var item=crew.items[i]；console.log（item.year）；console.log（item.boat）；console.log（item.position）；console.log（item.name）；}}本节适用于所有JSON？