Issue reading from an ext json file to html

Question

So I simply want to get 1 value stored in an external JSON file in the same folder. Every time I try to get the item, chrome says "unexpected token : " also, it shows another error saying that data in the JSON.parse(data) method is wrong. Either way, I'm getting that token error with or without the parse(). it doesn't like the "e1" : part, there is a red error line under that portion of the json file. I've seen about 6 suggestions on this site and others but it didn't help my particular issue. Any thoughts?

here is my code:

<!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>

And here is my JSON file

{
    "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"
        }
    }
}

I simply want to print any value or property value pair. Thanks.

Possible duplicate of [How to read an external local JSON file in Javascript](http://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript) — baao, Aug 26 '16 at 12:47

score 0 · Answer 1 · answered Aug 26 '16 at 12:41

0

Try to change your script tag like so:

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

then refer to it:

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

Hope this helps.

answered Aug 26 '16 at 12:41

Vermicello

308
1
6
11

score 0 · Accepted Answer · answered Aug 26 '16 at 13:29

Please try this Code

 <!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>

as per your code data.json file should be like

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"
            }
        }
    };

Hope it works for you.

Thanks, this did the trick. Yes, the ID to Id part was a mistake but just assigning extJSON = data; was my big issue. — Sierra Bravo, Aug 27 '16 at 12:02

Issue reading from an ext json file to html

2 Answers2