3

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.

RYDiiN
  • 289
  • 1
  • 5
  • 15

3 Answers3

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.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)
});
vinayakj
  • 5,591
  • 3
  • 28
  • 48
  • This is not using a JSON file rather using a javascript object _data_ to act like a JSON. I HAVE to pull it directly from an external JSON file. – RYDiiN Jun 28 '15 at 20:34
  • external JSON doesnt really make any diff, also I have added how it would look with external JSON also. `$.ajax({...` – vinayakj Jun 28 '15 at 20:35
  • Sorry, I still do not understand. What does the second snippet of code produce? – RYDiiN Jun 28 '15 at 20:46
  • that is the AJAX call to fetch the external JSON file, where `url` is the address of external JSON file. – vinayakj Jun 28 '15 at 20:52
  • I am struggling more than i should at the moment. I have tried to read in an external JSON file have haven't had any luck. I am unsure what I am dong wrong. I have messing around just to print out the contents of my JSON file and it is causing more frustration than anything else. Here is what I currently have, can you tell me what I am doing wrong? `$.ajax({ url: "src/passages.json", type: "POST", dataType: "JSONP", done: function(data){ var obj = jQuery.parseJSON(data); console.log(data); } })` – RYDiiN Jun 28 '15 at 23:40
  • This answer is great! Do you know how I can get this data to show up on a linked html file rather than in the console? – T.Doe Aug 10 '17 at 15:47
  • use DOM API to put the content in html document.. something like `document.getElementById('IDOfElement').innerHTML = data[index].title` – vinayakj Aug 11 '17 at 02:57
0

Yes, that example is valid JSON.

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

Rudi
  • 2,987
  • 1
  • 12
  • 18
0

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.

Arun Saragadam
  • 65
  • 10