How to access JSON encoded data of an array using javascript

Question

How can i access this response from server using javascript. This is the json encoded data.

      [{"cid":"1234","city":"value1","district":"value2","state":"value3"}]

Thanks in advance.

This is the ajax code:

 function cityauto(ctid){
     var city = document.getElementById(ctid);
     if(city.value.length > 3){
         $.ajax({
             type: "GET",
             url: "city.php",
             data: {term: city.value},
             success: function (data){
                 alert(data);
             }
         });
 }

Html code:

   <input type="text" name="city" id="cty" onblur="cityauto(this.id);" />

onblur i am getting above response from php file in alert box now i need to access that values in javscript.

Please provide more info about what you wan't to do, what you have tried and your code if any — Robert W. Hunter, Jan 10 '14 at 09:44
I know a guy called *Jason*, maybe he will know... **JSON!!!** — musefan, Jan 10 '14 at 09:44
Please include information about how you are getting that response from the server, show some code — musefan, Jan 10 '14 at 09:46

Cerbrus · Accepted Answer · 2014-01-10T09:56:01.873

Assuming the JSON is returned as a string:

var data = '[{"cid":"1234","city":"value1","district":"value2","state":"value3"}]';
// Parse the data as json
var obj = JSON.parse(data)
// Access the ojbect:
console.log(obj);
console.log(obj[0]);     // == Object {cid: "1234", city: "value1", district: "value2", state: "value3"} 
console.log(obj[0].cid); // == 1234

The [0] is to access the first object inside the JSON, which is an array. Then you just add .name, where 'name' is the name of the variable you want. (like .cid).

If the JSON is already a object, you can skip the JSON.parse():

var obj = [{"cid":"1234","city":"value1","district":"value2","state":"value3"}];

And access it like the example above.
(In that case, this question is more about accessing JavaScript objects, instead of JSON)

In your case, you can access the data like this:

success: function (data){
    var obj = JSON.parse(data);
    // Do stuff with `obj` here.
}

score 3 · Answer 2 · edited Mar 07 '19 at 10:21

3

If this is the only response data then you can access as:

var data = [{"cid":"1234","city":"value1","district":"value2","state":"value3"}];
console.log(data[0].cid);

# "1234"

Correction

var data = [{"cid":"1234","city":"value1","district":"value2","state":"value3"}];

var obj = JSON.parse(data);
console.log(obj[0].cid);

# "1234"

edited Mar 07 '19 at 10:21

TheTechGuy

16,560
16
115
136

answered Jan 10 '14 at 09:44

Dhanu Gurung

8,480
10
47
60

2

Thanks for reply. but JSON.parse(data) is required there. before console statement. – NiksD Jan 10 '14 at 10:22
Are you getting string data in success callback of ajax? – Dhanu Gurung Jan 10 '14 at 10:32
m getting array of data as mentioned above. – NiksD Jan 10 '14 at 10:53
Then you don't need to do JSON.parse(data). JSON.parse is used in case your response is string containing json data as mentioned in 'Cerbrus' solution below. – Dhanu Gurung Jan 10 '14 at 10:56
Yes it is ! Thanks for replying. – NiksD Jan 10 '14 at 11:13

score -1 · Answer 3 · answered Jan 10 '14 at 09:45

-1

If you recive that response from a page then you can try $.getJSON method using jQuery

$.getJSON("yourwebsite.com/yourpage", function( data ) {
      console.log(data);
});

If you want to use it as a variable, from plain JSON (not accesing to it from another page/request)

var data = '[{"cid":"1234","city":"value1","district":"value2","state":"value3"}]';

Then you can use

$.each( data, function( key, val ) {
          console.log(key + ":" + val);
  });

to access json data in a foreach routine...

Or data[key].innerykey for example data[0].cid 0 is your first array of data, and .cid is the key that you want to retrieve, it can be cid city or whatever you want, if you have more, you can use different number in data[X]

answered Jan 10 '14 at 09:45

Robert W. Hunter

2,895
7
35
73

And where might one find the function `$.getJSON`? – musefan Jan 10 '14 at 09:48
forgot to tell about jquery :P – Robert W. Hunter Jan 10 '14 at 09:50
I would like to know why the negative votes, my answer is valid, I explained how to use json in two different ways, thank you – Robert W. Hunter Jan 10 '14 at 11:16
@user1381537 Because nowhere in the question, nor in the code does the author of the question mention jQuery. jQuery is not the solution to everything and in most cases, if someone does not ask for jQuery, don't post it or you'll get downvoted. – Butt4cak3 Jan 15 '14 at 08:25
I mentioned to use jQuery but another option to use `var data =` etc but ok whatever – Robert W. Hunter Jan 15 '14 at 11:15

How to access JSON encoded data of an array using javascript

3 Answers3

Correction

Linked