JSON parse will not execute with JavaScript

Question

This is my current code, any help would be greatly appreciated. I need to call my listApp.json file and parse it. I want to display my list which currently has one link. I'm new to this.

<script type = "text/javascript">
// If the .js files are linked correctly, we should see the following output inside the JavaScript Console
console.log("starting...");

// Gets the .json file and applies the function  
var json;
  // When the document is ready then run the function
  $(document).ready(function(){
    // Standard jQuery ajax technique to load a .json file
    $.ajax({    
      type: "GET", // Requests data from a specified resource
      url: "include/listApp.json", // Gets the file on which the url is directed to
      dataType: "json", // Data Type needs to be json in this case. This can be xml
      success: jsonParser // If successful then run the, 'jsonParser' function

    });
  });
// Actual parse function
function jsonParser(data) {
    JSON = data;

    $(JSON).find("games").each(function (){
      games = $(this);
      var name = $(games).find("name").text();
      var url = $(games).find("url").text();
      var id = $(ganes).find("id").text();

      console.log(name);
      // Appends list + link + name
      $("#myList").append('<li>'+ "<a href ="+url+">"+name+"</a>"+'</li>');
      $('#myList').listview('refresh');
      $("#pages").append('<div data-role="page" id = "'+ id +'"><img src = '+ url +'> test</div>');

      });

    }

</script>

do you get an error? can you paste the contents of lstApp.json? — scgough, Jun 18 '15 at 10:58
what is the value of `data`... if `data` is a json object then `$(JSON).find("games")` won't return anything... — Arun P Johny, Jun 18 '15 at 10:58
Here is my .json file:{ "listApp": { "games": [ { "id": "1", "name": "Fallout", "url": "http://vignette4.wikia.nocookie.net/fallout/images/e/e2/BoS_soldier_Capitol_building.jpg/revision/latest?cb=20090430094924" } ] } } — Matt Moore, Jun 18 '15 at 11:04
mostly you need to iterate over data like `$.each(data, function(){})` — Arun P Johny, Jun 18 '15 at 11:04
This may be relevant: http://stackoverflow.com/questions/4992383/use-jquerys-find-on-json-object — BJ Safdie, Jun 18 '15 at 11:07

Arun P Johny · Accepted Answer · 2015-06-18T11:09:52.323

Since data is an object, you can access the games array using data.listApp.games and iterate over it using $.each(), then inside the loop callback you will the game object as second param and you can access its properties using member operator

function jsonParser(data) {

    $.each(data.listApp.games, function (i, game) {
        var name = game.name;
        var url = game.url;
        var id = game.id;

        console.log(name);
        // Appends list + link + name
        $("#myList").append('<li>' + "<a href =" + url + ">" + name + "</a>" + '</li>');
        $('#myList').listview('refresh');
        $("#pages").append('<div data-role="page" id = "' + id + '"><img src = ' + url + '> test</div>');

    });

}

One more quick question, how would I go about adding a back button to each list item? Normally I use:

JSON parse will not execute with JavaScript

1 Answers1