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=''>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.

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.'>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.

• javascript
• jquery
• html
• json
• jquery-plugins

Share Follow edited Jun 28, 2015 at 20:38 RYDiiN asked Jun 28, 2015 at 18:51 RYDiiNRYDiiN 29911 gold badge66 silver badges1515 bronze badges 3

• possible duplicate of Parse JSON in JavaScript? – Jeroen Vervaeke Commented Jun 28, 2015 at 18:53
• Once you loaded the file with Ajax, just use JSON.parse(theString) to get a JS object. – blex Commented Jun 28, 2015 at 18:53
• you can check the validation of your JSON at jsoneditoronline – vinayakj Commented Jun 28, 2015 at 18:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.\'>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./api/json/get/cgRivNixNK",
     type: "POST", //type:"GET"
     dataType: "JSON",
     success: function(data){
           console.log(data)
     }
})

OR

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

Yes, that example is valid JSON.

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

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.\'>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./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.