Using JSON.stringify and can't access the JSON array

Question

I am using php and using json_encode() function I returned/echoed JSON array. I was using jquery ajax and successfully retrieved this data:

[{"id":"1132","city":"Manila Central Post Office","province":"Manila"}]

I use this code on my Javascript btw:

var val = jQuery.parseJSON(JSON.stringify(result));

and when I tried to accessed the data on the array like:

console.info(val.city); // results to undefine

It gives me 'undefined' result. I tried doing For in loop still doesn't work. Maybe I'm doing something wrong, any help would be great. THANKS

Ajax code:

$.ajax({
    type: 'POST',
    url: path,
    cache: false,
    data: postData,
    success: function (result) {
        var val = jQuery.parseJSON(JSON.stringify(result, false, replacer));
        var val2 = jQuery.parseJSON(val);
        console.info(val2);
        console.info(val2.id);
    },
    error: function (e) {
        $("#sys_msg").html(e);
        $("#myModal").modal({
            show: true,
            backdrop: false,
            keyboard: true
        });
    }
});

val is an array, the object with a city key is the first item in that array. Why do you stringify then re-parse it, anyway? — jonrsharpe
– jonrsharpe, Commented Mar 28, 2016 at 8:55
var val = jQuery.parseJSON(JSON.stringify(result, false , replacer)); var val2 = jQuery.parseJSON(val); — Jomar Llevado
– Jomar Llevado, Commented Mar 28, 2016 at 8:57

Ibrahim Khan · Accepted Answer · 2016-03-28 08:57:15Z

2

val is an array. You need to specify index like below.

var result = [{ "id": "1132", "city": "Manila Central Post Office", "province": "Manila" }];
var val = jQuery.parseJSON(JSON.stringify(result));
alert(val[0].city);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Mar 28, 2016 at 8:57

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jomar Llevado Over a year ago

[Object { id="1132", city="Manila Central Post Office", province="Manila"}]. It turned back into object again.

Jomar Llevado Over a year ago

I've up voted since you were able to extract the JSON data. THANKS :)

Ibrahim Khan Over a year ago

In fact you don't need use this var val = jQuery.parseJSON(JSON.stringify(result)); line. You can use result[0].city directly. @JomarLlevado

Shekhar Chikara · Accepted Answer · 2016-03-28 09:04:53Z

1

Here val is an array of objects, so you cannot access the city value directly by calling val.city. If the data being returned is already encoded by using json_encode(), then you simply need to use $.parseJSON(data). The following code snippet shows how to do this-

var temp = '[{"id":"1132","city": "Manila Central Post Office", "province":"Manila"},{"id":"1133","city": "Another Test Post Office", "province":"Test"}]'; //Defined temp as string since the data response returned from the server should also be a json encoded string.

var val = $.parseJSON(temp);

$.each(val, function(index, item) {
    var city = item.city;
    $('.container').append('City: '+city+'<br/>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container"></div>

edited Mar 28, 2016 at 9:04

answered Mar 28, 2016 at 8:59

Shekhar Chikara

3,8322 gold badges32 silver badges53 bronze badges

3 Comments

Shekhar Chikara Over a year ago

@JomarLlevado What other problem are you facing?

Jomar Llevado Over a year ago

I'm trying to pull the data, which is what you give to me and I'm trying to put it in a specified html DOM such as input

Shekhar Chikara Over a year ago

In order to put the data in a specified html DOM, you can simply do something like $('#inputFieldCity').val(city); where inputFieldCity is the ID of your input field.

Jai · Accepted Answer · 2016-03-28 09:02:32Z

See, the issue can be easily resolved by dataType:"json". If you don't have this attached in your ajax code then the returned response will be a json string and in this case only you have to parse it with jQuery.parseJSON() or JSON.parse().

So, you can add the dataType to the ajax or instead just only parse it.

success: function(result){
  var val = jQuery.parseJSON(result); // or JSON.parse(result);
  console.info(val[0].city);
},

With dataType:

$.ajax({
  type: 'POST',
  url: path,
  cache: false,
  data: postData,
  dataType: 'json', //<-----add this here
  success: function(result) {
    for (o in result) { // <----and just use this way
      console.info(o.city);
    }
  },
  error: function(e) {
    $("#sys_msg").html(e);
    $("#myModal").modal({
      show: true,
      backdrop: false,
      keyboard: true
    });
  }
});

Ibrahim Khan · Accepted Answer · 2016-03-28 09:24:47Z

0

You don't have to stringify it then parse it to JSON again. You can just add dataType: "json" in your AJAX.

$.ajax({
    type: 'POST',
    url: path,
    cache: false,
    data: postData,
    dataType: "json",

    success: function (result) {

        console.info(result);
        console.info(result.id);
    },
    error: function (e) {
        $("#sys_msg").html(JSON.stringify(e));
        $("#myModal").modal({
            show: true,
            backdrop: false,
            keyboard: true
        });
    }
});

edited Mar 28, 2016 at 9:24

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

answered Mar 28, 2016 at 9:09

rmondesilva

1,7923 gold badges18 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using JSON.stringify and can't access the JSON array

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related