从 ext json 文件读取到 html 的问题答案

【问题标题】：Issue reading from an ext json file to html从 ext json 文件读取到 html 的问题
【发布时间】：2016-08-26 12:36:33
【问题描述】：

所以我只想将 1 个值存储在同一文件夹中的外部 JSON 文件中。每次我尝试获取该项目时，chrome 都会说“unexpected token:”，它还会显示另一个错误，指出 JSON.parse(data) 方法中的数据是错误的。无论哪种方式，无论是否使用 parse()，我都会收到该令牌错误。它不喜欢 "e1" : 部分，在 json 文件的该部分下有一条红色错误行。我在这个网站和其他网站上看到了大约 6 条建议，但这对我的特定问题没有帮助。有什么想法吗？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Objects 2</title>
    <script type="text/javascript" src="data.json"></script>
</head>
<body>
    <div id="test"></div>
    <script>
        var extJSON = JSON.parse(data);
        document.getElementByID("test").innerHTML = extJSON.e1.position;
    </script>
</body>
</html>

这是我的 JSON 文件

{
    "e1" : 
    {
        "first_name" : "John",
        "last_name"  : "Smith",
        "age"        : 42,
        "position"   : "mechanic",
        "phone"      : 
        {
            "home"   : "718-111-1111",
            "mobile" : "718-222-2222",
            "work"   : "718-333-3333"
        }
    },
    "e2" :
    {
        "first_name" : "Jane",
        "last_name"  : "Smith",
        "age"        : 34,
        "position"   : "Investor",
        "phone"      : 
        {
            "home"   : "305-111-1111",
            "mobile" : "305-222-2222",
            "work"   : "305-333-3333"
        }
    },
    "e3" :
    {
        "first_name" : "Rusty",
        "last_name"  : "Colon",
        "age"        : 23,
        "position"   : "Diver",
        "phone"      : 
        {
            "home"   : "415-111-1111",
            "mobile" : "415-222-2222",
            "work"   : "415-333-3333"
        }
    },
    "e4" :
    {
        "first_name" : "Anna",
        "last_name"  : "Spencer",
        "age"        : 20,
        "position"   : "Event Planner",
        "phone"      : 
        {
            "home"   : "786-111-1111",
            "mobile"   : "786-222-2222",
            "work" : "786-333-3333"
        }
    }
}

我只想打印任何值或属性值对。谢谢。

【问题讨论】：

How to read an external local JSON file in Javascript的可能重复

标签： javascript json

【解决方案1】：

请试试这个代码

 <!DOCTYPE html>
    <html>
    <head>
        <title>Objects 2</title>
        <script type="text/javascript" src="data.json"></script>
    </head>
    <body>
        <div id="test"></div>
        <script>
            var extJSON = data;
            document.getElementById("test").innerHTML = extJSON.e1.position;
// it is getElementById not getElementByID. it is case sensitive.
        </script>
    </body>
    </html>

根据您的代码data.json 文件应该是这样的

data= {
        "e1" : 
        {
            "first_name" : "John",
            "last_name"  : "Smith",
            "age"        : 42,
            "position"   : "mechanic",
            "phone"      : 
            {
                "home"   : "718-111-1111",
                "mobile" : "718-222-2222",
                "work"   : "718-333-3333"
            }
        },
        "e2" :
        {
            "first_name" : "Jane",
            "last_name"  : "Smith",
            "age"        : 34,
            "position"   : "Investor",
            "phone"      : 
            {
                "home"   : "305-111-1111",
                "mobile" : "305-222-2222",
                "work"   : "305-333-3333"
            }
        },
        "e3" :
        {
            "first_name" : "Rusty",
            "last_name"  : "Colon",
            "age"        : 23,
            "position"   : "Diver",
            "phone"      : 
            {
                "home"   : "415-111-1111",
                "mobile" : "415-222-2222",
                "work"   : "415-333-3333"
            }
        },
        "e4" :
        {
            "first_name" : "Anna",
            "last_name"  : "Spencer",
            "age"        : 20,
            "position"   : "Event Planner",
            "phone"      : 
            {
                "home"   : "786-111-1111",
                "mobile"   : "786-222-2222",
                "work" : "786-333-3333"
            }
        }
    };

希望它对你有用。

【讨论】：

谢谢，这成功了。是的，ID 到 Id 部分是一个错误，但只是分配 extJSON = data;是我的大问题。

【解决方案2】：

尝试像这样改变你的脚本标签：

<script id="data" type="application/json" src="data.json">

然后参考它：

var extJSON = JSON.parse($("#data").html());

希望这会有所帮助。

【讨论】：