Read json in JQuery

Question

I have this file json where I have, for each event (when), some reaction (do):

{"title":"Building blocks",
"date":"'1452786221'",
"scenes":[
  [{
    "when":{"event":"init"},
    "goto":""
   },
   {
    "when":{"event":"e_dTou","position":"up"},
    "do":[
           {"action":"a_dME","position":"open"},
           {"action":"a_dME","position":"close"}
         ],
    "goto":""
    }
  ]
]}

I read this json from the file manifest.json with an ajax call so the data returned is text already parsed.

url = "json/manifest.json";
$.ajax({
    type:       "POST",
    url:        url,
    success:    function(data) {
                    console.log(data.scenes.when);
                },
    error:      function() {
                    alert("Call" + url + " failed...");
                }
});

With my code on console I have undefined . I want to read every data of this json in JQuery and write it on console. How can I do it? Thank you in advance.

[JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) — Lewis, Jan 15 '16 at 09:51
Possible duplicate of [how to parse json data with jquery / javascript?](http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript) — P. Frank, Jan 15 '16 at 09:52
You need to make sure you have valid JSON. Please check this validator out - http://jsonlint.com/ — YaBCK, Jan 15 '16 at 09:57
Sorry, I have formatted wrong the json in stackoverflow edior :-) — Simone Colombo, Jan 15 '16 at 09:59

score 0 · Answer 1 · answered Jan 15 '16 at 10:15

0

You can use $.getJSON
Example:

$.getJSON( "url/to/file.json", function(data) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( key + ': ' + val );
  });
  console.log( 'items: ', items );
});

answered Jan 15 '16 at 10:15

lifeisgame

11
3

Ok, now I can read title and date but in scenes I have `scenes: [object Object],[object Object]`. How can I read `when`, `event` and `do` ? – Simone Colombo Jan 15 '16 at 10:21
Use `JSON.parse`: console.log( 'items: ', JSON.parse(items) ); – lifeisgame Jan 15 '16 at 12:04

score 0 · Answer 2 · answered Jan 15 '16 at 10:18

0

try like that:

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

answered Jan 15 '16 at 10:18

vipin

2,374
1
19
36

Ok, now I can read title and date but in scenes I have `scenes: [object Object],[object Object]`. How can I read `when`, `event` and `do` ? – Simone Colombo Jan 15 '16 at 10:24

score 0 · Answer 3 · answered Jan 15 '16 at 10:29

I will give you some hint as my json is

{
$id: "1",
UserId: 1089,
Name: "abc",
Email: "xyz@web.com",
Password: "&*&*",
Phone: "9000000000",
Gender: "M",
AvatarName: "Jellyfish.jpg",
AvatarPath: "c:/folder",
CreatedAt: "2015-12-09T13:19:57.68",
ModifiedAt: "2016-01-11T15:16:25.297",
DOB: "05/06/1993"
}

and i fetched like that,

$(document).ready(function() {
    $("#btn").on("click", function(a) {
        var e = $("input#Email").val();
        $.getJSON("http://192.168.0.1:24402/api/user/showbyemail?Email=" + e, function(a) {
            $("input#Email").val(""), $("img#a").hide();
            var e = a.AvatarPath;
            $("#stage").html('<img id="a" src="'+ e + '" height="200" width="400">'),
              $("img#a").hide(),
              $("img#a").show(1e3), 
              $("#stage").append("<p> Name: " + a.Name + "</p>"),
              $("#stage").append("<p>Phone : " + a.Phone + "</p>"), 
              $("#stage").append("<p> Gender: " + a.Gender + "</p>"),
              $("#stage").append("<p> Email: " + a.Email + "</p>"), 
              $("#stage").append("<p> Password: " + a.Password + "</p>")
        })
    }), $(document).keypress(function(a) {
        13 == a.which && $("#btn").click()
    })
});

it may help you buddy

Sorry but my json is different from your because I have (and I want read) some `Object` into my json file. — Simone Colombo, Jan 15 '16 at 10:37

score 0 · Accepted Answer · answered Jan 25 '16 at 09:20

Ok, I have solved the problem. First I iterate three time the json and I put its content into trigger_json array.

$.each( data, function( key, val ) {
    json.push(val);
});
$.each( json[2], function( key, val ) {
    scenes.push(val);
});
$.each( scenes[0], function( key, val ) {
    trigger_json.push(val);
});

Next to use the content of the array (when, do, goto, e..) I iterate trigger_json in this way:

for(i=0; i<trigger_json.length; i++)
{
    // Use for example trigger_json[i].when.event
    for(j=0; j<trigger_json[i].do.length; j++)
    {
        // Use for example trigger_json[i].do[j].action
    }
}

Read json in JQuery

4 Answers4