ali ak ali ak - 1 month ago 8
JSON Question

How to read a local JSON file

I am following a tutorial on YouTube but I couldn't make it run. Basically I have a

country.json
file.and I am trying to retrieve data inside it. What is wrong here??

This is how
country.json
file looks like

{
"name": "Germany",
"capital": "Berlin",
"pop": "some value"
}


JavaScript

var container = $("div.container");
$("input#get").click(function () {
$.ajax({
type: "Get",
url: "country.json",
dataType: "json",
successs: function (data) {
$.each(data, function (index, item) {
$.each(item, function (key, value) {
container.append(key + " : " + value + "</br>");
});
container.appendChild("<br/><br>")
});
}
});
});


HTML

<div class="container"></div>
<div id="form-area">
<h2>Get</h2>
<input type="submit" id="get" value="get">
</div>

Answer

You can get it like this:-

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

</head>
<body>
<div class="container"></div>
<div id="form-area">
    <h2>Get</h2>
    <input type="submit" id="get" value="get">
</div>
</body>
</html>

 <script type="text/javascript">
var container = $(".container"); //check change here
$("#get").click(function () { //check change here
    $.getJSON( "country.json", function( data ) {
       var myhtml = ''; // create an empty variable
        $.each(data, function (key, value) {
            myhtml += key + ' : ' + value + '</br>'; // append data to variable

        });
      container.append( myhtml); // append the whole data (variable) to div
    });
});
</script>

Output (on my local browser):- http://prntscr.com/cq2jjt

Note:- to read data from json file $.getJSON() is required.

Check more detail:- http://api.jquery.com/jquery.getjson/

Comments