current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite

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.

share|improve this question
    
possible duplicate of Parse JSON in JavaScript? – Jeroen Vervaeke Jun 28 '15 at 18:53
    
Once you loaded the file with Ajax, just use JSON.parse(theString) to get a JS object. – blex Jun 28 '15 at 18:53
    
you can check the validation of your JSON at jsoneditoronline.org – vinayakj Jun 28 '15 at 18:53
up vote 2 down vote

Below is sample snippet how to read the JSON.

var data = [
  {"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"}
   ];


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)
});
share|improve this answer
    
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
up vote 0 down vote

Yes, that example is valid JSON.

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

share|improve this answer
up vote 0 down vote 

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.