Reading a simple JSON File in JavaScript

Question

I have a JSON file with this as the content:

{
    "residents": [
        {
            "name" : "Jacob",
            "title" : "King",
            "gender" : "Male",
        },
        {
            "name" : "Luthor",
            "title" : "Prince",
            "gender" : "Male"
        },
        {
            "name" : "Mileena",
            "title" : "Princess",
            "gender" : "Female"
        },
    ]
}

I want to read the json in JavaScript, but certainly, I have no idea. How would I come about with this problem?

score 0 · Answer 1 · edited Apr 10 '15 at 04:52

Assuming this is for web because of your web tag, the easiest method is using jquery.

$.get('http://ip.jsontest.com', function(data) { console.log(data); });

If the server uses the correct MIME type in the response of the JSON then jquery will convert it to an object and "data" in the above example will be the evaluated JSON.

If the server does not use the correct MIME type you can wrap it in JSON.parse:

 var json = JSON.parse(data);

score 0 · Answer 2 · answered Apr 10 '15 at 04:46

0

You can use JQuery for this.

$.ajax({
   url: "\data.json", //name of your json file
   success: function (data) {
      var obj = JSON.parse(data);
   }
});

Then you can get necessary property by the call of:

obj.residents[0].name

and so on.

answered Apr 10 '15 at 04:46

Artyom Pranovich

6,814
8
41
60

score 0 · Answer 3 · answered Apr 10 '15 at 04:48

0

It depends on environment that you use.
If you work with node.js you should read this file with API - fileRead
Then you should use JSON.parse for parsing it in {Object}

If you work in browser and some server has path to static with this file you can use ajax for getting this file

In both cases you should do such steps:

Get file as {String}
Parse to {Object}

answered Apr 10 '15 at 04:48

JIoJIaJIu

155
1
9

I would like it to be the very basic, since I am only a starter. I don't yet grasp what the other ways are yet. – Matt Apr 10 '15 at 04:58

score -1 · Answer 4 · answered Apr 10 '15 at 04:46

Try this..

var mymessage='{
    "residents": [
        {
            "name" : "Jacob",
            "title" : "King",
            "gender" : "Male",
        },
        {
            "name" : "Luthor",
            "title" : "Prince",
            "gender" : "Male"
        },
        {
            "name" : "Mileena",
            "title" : "Princess",
            "gender" : "Female"
        },
    ]
}';
var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.residents.length; i++) {
    var resident= jsonData.residents[i];
    console.log(resident.name);
}

Mox Shah · Accepted Answer · 2015-04-10T04:59:56.600

-1

Something like this?

$(function () {

    $("#btnTest").click(function () {

        var data = {
            "residents": [{
                "name": "Jacob",
                    "title": "King",
                    "gender": "Male",
            }, {
                "name": "Luthor",
                    "title": "Prince",
                    "gender": "Male"
            }, {
                "name": "Mileena",
                    "title": "Princess",
                    "gender": "Female"
            }, ]
        };
     //If you're getting it somewhere from ajax call, than possibly it would be in string , in that case you need to `parse` it as  data = JSON.parse(data);
        $.each(data.residents, function (index, value) {
            $("#data").append(value.name + " " + value.title + " " + value.gender + " </br>");
        });

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnTest" value="Try Me!" />
<div id="data"> 
  </div>

edited Apr 10 '15 at 04:59

answered Apr 10 '15 at 04:46

Mox Shah

2,967
2
26
42

thank you very much Moksh, this is really helpful. How about if we place the function in a button, would it go the same way? – Matt Apr 10 '15 at 04:51
@MyDestinyWP Sorry I didn't get it, can you brief it more? – Mox Shah Apr 10 '15 at 04:52
Oh sorry about that. For example, I have a button and whenever I set the onclick of it as a function called "readjsonfile", how will I do the function correctly for the button? Would it be function readjsonfile() then just call on the parsing? – Matt Apr 10 '15 at 04:56
1

that is awesome. (y) – Matt Apr 10 '15 at 05:14
Last question, if the JSON variable is on a separate file, how can I come about reading it? Won't it be unreadable or the function won't show anymore right after it is not on the HTML file? – Matt Apr 10 '15 at 05:23
whatever if variable is in any file, but that JS file must be included in in HTML, that is also before the JS in which you're going to use. – Mox Shah Apr 10 '15 at 05:27

score -1 · Answer 6 · answered Apr 10 '15 at 04:48

Using javascript you would just do...

obj = JSON.parse({
"residents": [
    {
        "name" : "Jacob",
        "title" : "King",
        "gender" : "Male",
    },
    {
        "name" : "Luthor",
        "title" : "Prince",
        "gender" : "Male"
    },
    {
        "name" : "Mileena",
        "title" : "Princess",
        "gender" : "Female"
    },
]
});

You now have the JSON in an object that you can manage

console.log(obj);

score -1 · Answer 7 · answered Apr 10 '15 at 04:48

You can fetch it like below

var text = '{
"residents":[
{
    "name" : "Jacob",
    "title" : "King",
    "gender" : "Male",
},
{
    "name" : "Luthor",
    "title" : "Prince",
    "gender" : "Male"
},
{
    "name" : "Mileena",
    "title" : "Princess",
    "gender" : "Female"
},
]

}'; // That is your data from request

var obj = JSON.parse(text);
alert(obj.residents);
alert(obj.residents[0].name);

score -1 · Answer 8 · answered Apr 10 '15 at 04:49

<script>
    json_text = '{
    "residents":[
             {
                 "name" : "Jacob",
                 "title" : "King",
                 "gender" : "Male",
             },
             {
                 "name" : "Luthor",
                 "title" : "Prince",
                 "gender" : "Male"
             },
             {
                 "name" : "Mileena",
                 "title" : "Princess",
                 "gender" : "Female"
             },
        ]}';
        var obj = JSON.parse(json_text);
        alert(obj.residents[2].name);
</script>

This code will bring up an alert dialog box in the browser with the value of name attribute of the second object in the array residents.

Thank you :) How about if we place the function in a button, would it go the same way? — Matt, Apr 10 '15 at 04:52

score -1 · Answer 9 · answered Apr 10 '15 at 04:52

First and foremost your json string has error.

{
"residents": [
    {
        "name" : "Jacob",
        "title" : "King",
        "gender" : "Male",
    },
    {
        "name" : "Luthor",
        "title" : "Prince",
        "gender" : "Male"
    },
    {
        "name" : "Mileena",
        "title" : "Princess",
        "gender" : "Female"
    },
]

}

There won't be comma after the third parenthesis from the end.

JSONString = '{ . . . . }'; JSONObject = JSON.parse(JSONString);

This way you can access the json data from JSONObject.

Also, your string has error on >> "name" : "Jacob","title" : "King","gender" : "Male", << there won't be any comma after "male" — o12d10, Apr 10 '15 at 05:02

score -1 · Answer 10 · answered Apr 10 '15 at 04:53

try this

<!docTpye html>
<html>
<head>
<script>
var data={
    "residents": [
        {
            "name" : "Jacob",
            "title" : "King",
            "gender" : "Male",
        },
        {
            "name" : "Luthor",
            "title" : "Prince",
            "gender" : "Male"
        },
        {
            "name" : "Mileena",
            "title" : "Princess",
            "gender" : "Female"
        },
    ]
}
for(var i=0;i<data.residents.length;i++){
console.log(data.residents[i].name);
alert(data.residents[i].name);
}
</script>
</head>
<body>
</body>
</html>

Reading a simple JSON File in JavaScript

10 Answers10