How can I get javascript to read from a json file

Question

My script currently looks like this    lt script type  text javascript  gt    function updateMe        var x   0      var jsonstr      date   July 4th    event   Independence Day         var activity JSON parse jsonstr       while x lt 10       date   document getElementById  date  x  innerHTML   activity date      event   document getElementById  event  x  innerHTML   activity event      x               lt  script gt    Where date x  and event x  are a series of html tags   This function runs when the page loads  onload    My goal is to do this exact same thing  only from a local  json file as opposed to the hard code that I ve got above   I ve already checked out http   api jquery com jQuery getJSON    The local  json file looks like this     date   July 4th    event   Independence Day     Any suggestions

User · Answer

Instead of storing the data as pure JSON store it instead as a JavaScript Object Literal; E.g.

_x000D_

window.portalData = [_x000D_
  {_x000D_
    "kpi" : "NDAR",_x000D_
    "data": [15,152,2,45,0,2,0,16,88,0,174,0,30,63,0,0,0,0,448,4,0,139,1,7,12,0,211,37,182,154]_x000D_
  },_x000D_
  {_x000D_
     "kpi" : "NTI",_x000D_
     "data" : [195,299,31,32,438,12,0,6,136,31,71,5,40,40,96,46,4,49,106,127,43,366,23,36,7,34,196,105,30,77]_x000D_
  },_x000D_
  {_x000D_
     "kpi" : "BS",_x000D_
     "data" : [745,2129,1775,1089,517,720,2269,334,1436,517,3219,1167,2286,266,1813,509,1409,988,1511,972,730,2039,1067,1102,1270,1629,845,1292,1107,1800]_x000D_
  },_x000D_
  {_x000D_
     "kpi" : "SISS",_x000D_
     "data" :  [75,547,260,430,397,91,0,0,217,105,563,136,352,286,244,166,287,319,877,230,100,437,108,326,145,749,0,92,191,469]_x000D_
  },_x000D_
  {_x000D_
 "kpi" : "MID",_x000D_
 "data" : [6,17,14,8,13,7,4,6,8,5,72,15,6,3,1,13,17,32,9,3,25,21,7,49,23,10,13,18,36,9,12]_x000D_
  }_x000D_
];

_x000D_

You can then do the following in your HTML

<script src="server_data.js"> </script>


function getServerData(kpiCode)
{
    var elem = $(window.portalData).filter(function(idx){
        return window.portalData[idx].kpi == kpiCode;
     });

    return elem[0].data;
};

var defData = getServerData('NDAR');

User · Answer

You can do it like    Just give the proper path of your json file      lt  doctype html gt   lt html gt       lt head gt           lt script type  text javascript  src  abc json  gt  lt  script gt                lt script type  text javascript   gt                  function load                          var mydata   JSON parse data                        alert mydata length                         var div   document getElementById  data                          for var i   0 i  lt  mydata length  i                                                   div innerHTML   div innerHTML     lt p class  inner  id   i   gt    mydata i  name    lt  p gt       lt br gt                                                       lt  script gt       lt  head gt       lt body onload  load    gt       lt div id   data  gt        lt  div gt       lt  body gt   lt  html gt    Simply getting the data and appending it to a div    Initially printing the length in alert   Here is my Json file  abc json  data       name     Riyaz     name     Javed     name     Arun     name     Sunil     name     Rahul     name     Anita

User · Answer

NOTICE  AS OF JULY 12TH  2018  THE OTHER ANSWERS ARE ALL OUTDATED  JSONP IS NOW CONSIDERED A TERRIBLE IDEA   If you have your JSON as a string  JSON parse   will work fine  Since you are loading the json from a file  you will need to do a XMLHttpRequest to it  For example  This is w3schools com example     x000D   x000D  var xmlhttp   new XMLHttpRequest    x000D  xmlhttp onreadystatechange   function     x000D      if  this readyState    4  amp  amp  this status    200    x000D          var myObj   JSON parse this responseText   x000D          document getElementById  demo   innerHTML   myObj name  x000D        x000D     x000D  xmlhttp open  GET    json demo txt   true   x000D  xmlhttp send    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   x000D   lt h2 gt Use the XMLHttpRequest to get the content of a file  lt  h2 gt  x000D   lt p gt The content is written in JSON format  and can easily be converted into a JavaScript object  lt  p gt  x000D   x000D   lt p id  demo  gt  lt  p gt  x000D   x000D   x000D   lt p gt Take a look at  lt a href  json demo txt  target   blank  gt json demo txt lt  a gt  lt  p gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    It will not work here as that file isn t located here  Go to this w3schools example though  https   www w3schools com js tryit asp filename tryjson ajax  Here is the documentation for JSON parse    https   developer mozilla org en docs Web JavaScript Reference Global Objects JSON parse  Here s a summary      The JSON parse   method parses a JSON string  constructing the JavaScript value or object described by the string  An optional reviver function can be provided to perform a transformation on the resulting object before it is returned    Here s the example used    x000D   x000D  var json      result  true   count  42    x000D  obj   JSON parse json   x000D   x000D  console log obj count   x000D     expected output  42 x000D   x000D  console log obj result   x000D     expected output  true x000D   x000D   x000D    Here is a summary on XMLHttpRequests from https   developer mozilla org en-US docs Web API XMLHttpRequest       Use XMLHttpRequest  XHR  objects to interact with servers  You can retrieve data from a URL without having to do a full page refresh  This enables a Web page to update just part of a page without disrupting what the user is doing  XMLHttpRequest is used heavily in Ajax programming    If you don t want to use XMLHttpRequests  then a JQUERY way  which I m not sure why it isn t working for you  is  http   api jquery com jQuery getJSON    Since it isn t working  I d try using XMLHttpRequests  You could also try AJAX requests     ajax        async   false       global   false       url     jsonfile json        dataType    json        success   function  data               do stuff with data             Documentation  http   api jquery com jquery ajax

User · Answer

Actually  you are looking for the AJAX CALL  in which you will replace the URL parameter value with the link of the JSON file to get the JSON values     ajax       url   File json     the path of the file is replaced by File json     dataType   json       success  function  response            console log response     it will return the json array

User · Answer

Assuming you mean  file on a local filesystem  when you say  json file   You ll need to save the json data formatted as jsonp  and use a file    url to access it   Your HTML will look like this    lt script src  file   c   data  activity jsonp  gt  lt  script gt   lt script type  text javascript  gt    function updateMe        var x   0      var activity jsonstr      foreach  i in activity            date   document getElementById i date  innerHTML   activity date          event   document getElementById i event  innerHTML   activity event             lt  script gt    And the file c  data activity jsonp contains the following line   jsonstr       date   July 4th    event   Independence Day

[javascript] How can I get javascript to read from a .json file?

Examples related to javascript

Examples related to json

Examples related to getjson