How to pull & display data from either a JSON/JSONP file?

Question

Im wondering how I can grab and then display in my html file(using pure Javascript) the following objects found in the below JSON file? I specifically need to grab the following 3 objects and display each instance of each.. "barTitle," "id," and show all "OpenTimes."

Please note, I do have this file already uploaded to a webserver(http://codepupil.com/js/bar.json).

onBarLocationsLoaded({
   "results":[
      {
         "barCity":"Annapolis",
         "barState":"MD",
         "barZip":"21401",
         "recordingPhone":"410-213-1145",
         "distance":"2.10",
         "longitude":-725464,
         "latitude":489914,
         "barLong":-725464,
         "barLat":489914,
         "barLink":"http:\/\/www.bar.com\/bar\/bow-tie",
         "barName":"Bow Tie Bar",
         "movie":[
            {
               "barTitle":"Bar Louie",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
    {
               "barTitle":"Bar Louise",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
    {
               "barTitle":"Bar Louie",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
    {
               "barTitle":"Bar Capo",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
    {
               "barTitle":"Bar Boo Boo",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
  }
   ]
});

That's not a json object that's a function call to wich you pass a json object. — Tahar Bakir, Nov 14 '15 at 18:27
did you check this : http://stackoverflow.com/a/7220510/4088809 — Tahar Bakir, Nov 14 '15 at 18:29
Thank you, but as of now that doesnt make any sense to me. I'm a noob. — chaser7016, Nov 14 '15 at 18:53
Plus there is an error in that json object, i'm writing you an answer using that previous link. — Tahar Bakir, Nov 14 '15 at 19:27

score 1 · Answer 1 · edited May 23 '17 at 12:03

This is a function call with a big ass parameter

For example

function launchAnAlert(message) {
  alert(message);
}

This a js function that take a parameter named message and does something with it.

and if you want to call that function you do it like this

launchAnAlert("This is my text message");

Now let's take a look at your snippet, as you can see it looks like the previous call but instead of a String you are passing a Json object as parameter.

Your function name is onBarLocationsLoaded , in that snippet of yours is of this form

onBarLocationsLoaded(theJsonObject);

And there is an error in that Json object. You Json file should contain this :

{
   "results":[
      {
         "barCity":"Annapolis",
         "barState":"MD",
         "barZip":"21401",
         "recordingPhone":"410-213-1145",
         "distance":"2.10",
         "longitude":-725464,
         "latitude":489914,
         "barLong":-725464,
         "barLat":489914,
         "barLink":"http:\/\/www.bar.com\/bar\/bow-tie",
         "barName":"Bow Tie Bar",
         "movie":[
            {
               "barTitle":"Bar Louie",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Louise",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Louie",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Capo",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Boo Boo",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            }
         ]
      }
   ]
}

Now if you use the answer you can find here : https://stackoverflow.com/a/7220510/4088809

This should answer your question or at least point you in the direction : http://jsfiddle.net/hrncdj8e/

How to pull & display data from either a JSON/JSONP file?

1 Answers1