8

I have saved a JSON file in my local system and created a Javascript file in order to read the JSON file and print data out, for instance. Here is the JSON file:

[
{"Titel":"a", 
    "Timestamp":"2017-05-18 22:11",
    "Text":"a", 
    "img":"a.jpg",
    "FullText":"a"
},
{"Titel":"b",
    "Timestamp":"2017-08-08 22:11",
    "Text":"b",
    "img":"b.jpg",
    "FullText":"b" }]

Lets say this is the path where it takes you to the JSON file:

../news_data.json

Could anyone please help me with writing a simple piece of codes to read the JSON file and print the data inside it in Javascript. I am very new to Javascript and need something simple to start with. Your assistance would be very much appreciated.

Dinesh undefined
  • 5,490
  • 2
  • 19
  • 40
  • JavaScript has no built-in method to read files (JSON or otherwise). It depends on the host environment to provide an API for that. What tool are you using to execute your JavaScript? – Quentin Jan 03 '18 at 07:46
  • @Mr.Alien yes, but I didn’t find it –  Jan 03 '18 at 07:58
  • @kauthar [You sure?](https://www.google.co.in/search?q=load+json+file+using+javascript) – Mr. Alien Jan 03 '18 at 08:30

2 Answers2

16

Here's a way to do it without jQuery.

First create this function:

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', '../news_data.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}

Then you can use it by simply calling something like this:

loadJSON(function(json) {
  console.log(json); // this will log out the json object
});

I found this by simply googling "read local json file javascript" (source)

Joshua Terrill
  • 1,995
  • 5
  • 21
  • 40
  • *In Google Chrome, links to local files are disabled*! https://chrome.google.com/webstore/detail/enable-local-file-links/nikfmfgobenbhmocjaaboihbeocackld –  Aug 12 '19 at 15:08
  • @PauliSudarshanTerho In this case, the file would still have to be served from a local web server. – Joshua Terrill Aug 19 '19 at 18:03
  • Exactly. There is no client-side way to load json. And no easy way to conslude that. JSONP is the best way so far but can not load real json files without padding. –  Aug 20 '19 at 03:50
3

You can use jQuery.getJSON() in jquery

First add jquery CDN :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Now set full json file path as ex :- folder/file.json

Description: Load JSON-encoded data from the server using a GET HTTP request.

$.getJSON( "JSON FILE PATH", function( data ) {

    console.log(data); //json output 
});

DEMO 

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
 img {
    height: 100px;
    float: left;
  }
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="images"></div>

</body>
</html>
Aman Kumar
  • 4,533
  • 3
  • 18
  • 40