How to parse a external JSON file with arrays with javascript

Question

I am currently struggling with the issue of reading in a JSON file with javascript.
I am not entirely sure if this is the correct format for a JSON file with arrays, but here is my JSON file.

  [
      {
       "passageNumber":"2.3.1",
       "title":"Inside and out: A bronze Athena and a Temple of Octavia",
        "preReading":"This paragraph appears to refer to what the excavators named Temple E...",
        "reading":"<span>Lorem</span> ipsum <span>dolor</span> sit amet, consectetur",
        "media":"<img src='img/TempleE-capital.jpg'>",
        "lon":"41.925",
        "lat":"-91.426"
       },
       {
        "passageNumber":"2.3.2",
        "title":"The Road to Lechaeum",
        "preReading":"<a href='http://google.com'>yipppie",
        "postReading":"",
        "reading":"blahhhhhhhhhhhhhhhhhh.",
        "media":"<img src='img/templE-brick.jpg'>",
        "lon":"41.625",
        "lat":"-91.672"
       }
   ]

I ultimately would like to be able to read the JSON file (most likely with JQuery), and then select all of the information given a passage number.
Any help would be amazing.
Thank you!
EDIT I am pulling this from an external JSON file. It needs to load in the JSON file.

Answer 1

Below is sample snippet how to read the JSON.

var JSONDataFromExternalFile = '[{"passageNumber":"2.3.1","title":"Inside and out: A bronze Athena and a Temple of Octavia","preReading":"This paragraph appears to refer to what the excavators named Temple E...","reading":"<span>Lorem</span> ipsum <span>dolor</span> sit amet, consectetur","media":"<img src=\'img/TempleE-capital.jpg\'>","lon":"41.925","lat":"-91.426"},{"passageNumber":"2.3.2","title":"The Road to Lechaeum","preReading":"<a href=\'http://google.com\'>yipppie","postReading":"","reading":"blahhhhhhhhhhhhhhhhhh.","media":"<img src=\'img/templE-brick.jpg\'>","lon":"41.625","lat":"-91.672"}]'

var data = JSON.parse(JSONDataFromExternalFile);

function getDetails(passageNumber){

  for(i in data){
    if (data[i].passageNumber == passageNumber)
      return data[i];
  }
  return false;
}

var details = getDetails("2.3.2");
alert("title > "+details.title);
alert("preReading > "+details.preReading);

var details = getDetails("2.3.1");
alert("title > "+details.title);
alert("preReading > "+details.preReading);

In your code it would probably look like this.

UPDATE

$.ajax({
     url: "http://www.json-generator.com/api/json/get/cgRivNixNK",
     type: "POST", //type:"GET"
     dataType: "JSON",
     success: function(data){
           console.log(data)
     }
})

OR

$.ajax({
     url: "http://www.json-generator.com/api/json/get/cgRivNixNK",
     type: "POST", //type:"GET"
     dataType: "JSON"
})
.done(function(data){
           console.log(data)
});

Answer 2

function getDetails(passageNumber, strJSON) {
    var obj = jQuery.parseJSON(strJSON);
    
    
    $.each(obj, function (key, value) {
        if (passageNumber == value.passageNumber) {
   
            result = value;
            return false;
        }
    });
    
    return result;
}


var strJSON = '[\
  {"passageNumber":"2.3.1",\
   "title":"Inside and out: A bronze Athena and a Temple of Octavia",\
    "preReading":"This paragraph appears to refer to what the excavators named Temple E...",\
    "reading":"<span>Lorem</span> ipsum <span>dolor</span> sit amet, consectetur",\
    "media":"<img src=\'img / TempleE - capital.jpg \'>",\
    "lon":"41.925",\
    "lat":"-91.426"},\
   {"passageNumber":"2.3.2",\
    "title":"The Road to Lechaeum",\
    "preReading":"<a href=\'http: //google.com\'>yipppie",\
  "postReading": "",\
  "reading": "blahhhhhhhhhhhhhhhhhh.",\
  "media": "<img src=\'img/templE-brick.jpg\'>",\
  "lon": "41.625",\
  "lat": "-91.672"\
}\
]';


var result = getDetails("2.3.1", strJSON);
if(result != null) {
    alert(result.passageNumber);
    alert(result.title);
    
}

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

It's a very valid format and represents array of objects.

To find the information by passage number, the following function will help you:

function getDetails(passageNumber, strJSON) {
    var obj = jQuery.parseJSON(strJSON);


    $.each(obj, function (key, value) {
        if (passageNumber == value.passageNumber) {

            result = value;
            return false;
        }
    });

    return result;
}

Just pass your passage number and the json text to the function and it will return you the corresponding information mapped to that particular passage number. I have attached a code snippet too.

It will be a good idea to preprocess the data to store as key value pairs of passage numbers and corresponding data provided passage numbers are unique and calls to fetch data are high.

Answer 3

Yes, that example is valid JSON.

You can read the file and work with the data by using jQuery.getJSON