How can I take specific data from json in JavaScript?

Question

I want to get the latitude and longitude form the results of google geocoding API, but I don't know how to take out the latitude and longitude out using json. The results of google geocoding is like following:

[{
'address_components': [{
    'long_name': 'Macau',
    'short_name': 'MO',
    'types': ['country', 'locality', 'political']
}],
'formatted_address': 'Macau',
'geometry': {
    'bounds': {
        'northeast': {
            'lat': 22.2170639,
            'lng': 113.6127001
        },
        'southwest': {
            'lat': 22.1066001,
            'lng': 113.5276053
        }
    },
    'location': {
        'lat': 22.198745,
        'lng': 113.543873
    },
    'location_type': 'APPROXIMATE',
    'viewport': {
        'northeast': {
            'lat': 22.2170639,
            'lng': 113.6127001
        },
        'southwest': {
            'lat': 22.1066001,
            'lng': 113.5276053
        }
    }
},
'place_id': 'ChIJ88g14uB6ATQR9qyFtCzje8Y',
'types': ['country', 'locality', 'political']
}]

I only want to use:

'location': {
        'lat': 22.198745,
        'lng': 113.543873
    },

and save them in two variables. How can I make it?

Parse the json, then access the data? Really, what's your question? How to use JSON? Plenty of guides out there — Federico klez Culloca
– Federico klez Culloca, Commented Feb 2, 2018 at 15:51
@FedericoklezCulloca Yes, but I have tried many of them, all failed — Ben.W
– Ben.W, Commented Feb 2, 2018 at 15:52
Then show what you tried, otherwise we may suggest solutions that don't work for your use case. — Federico klez Culloca
– Federico klez Culloca, Commented Feb 2, 2018 at 15:53
The first character is a [, so the whole thing is an array. Right away inside the array we have a {, so the first element of the array is an object. That object has a property called geometry, which is also an object (because of the initial {). That geometry object has a property called location, which has the lat/long properties you're after. So, whatever variable this data gets put into, you need to access the latitude and longitude properties of the location property of the geometry property of the zeroth element of the array! — James
– James, Commented Feb 2, 2018 at 15:57

Lahar Shah · Accepted Answer · 2018-02-02 16:36:35Z

Copy Past your JSON to http://jsonviewer.stack.hu/ in 'Text' tab and check out the Viewer Tab.

You will see your tree view of your JSON string.

For location it is:

var obj = // your whole json object
var obj = JSON.parse(jsonString) // if you have JSON string not the object.

Then

var location = obj[0].geometry.location;

Here you have an array, so first, we accessing the first element with index = 0, obj[0] tthen the geometry obj[0].geometry and then the location obj[0].geometry.location

JSON is built on two structures:

A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

[ ] indicates array.
{ } indicates Object. (Key: value pair)

var a = ['a', 'b', {'c': 'i am value of key c', 'd': 'i am value of key d'}, 10];

console.log('Array element: a[0] = ', a[0]);
console.log('Access inside property of object: a[2].c = ', a[2].c);
console.log('Another way of accessing property: a[2][\'c\'] = ', a[2]['c']);
console.log('Accessing with . notation seems easy: a[2].d = ', a[2].d);
console.log('Array element can be string, number, obj, array, etc: a[3] = ', a[3]);

Check with your example:

var a = [  
    {  
        'address_components':[  
            {  
                'long_name':'Macau',
                'short_name':'MO',
                'types':[  
                    'country',
                    'locality',
                    'political'
                ]
            }
        ],
        'formatted_address':'Macau',
        'geometry':{  
            'bounds':{  
                'northeast':{  
                    'lat':22.2170639,
                    'lng':113.6127001
                },
                'southwest':{  
                    'lat':22.1066001,
                    'lng':113.5276053
                }
            },
            'location':{  
                'lat':22.198745,
                'lng':113.543873
            },
            'location_type':'APPROXIMATE',
            'viewport':{  
                'northeast':{  
                    'lat':22.2170639,
                    'lng':113.6127001
                },
                'southwest':{  
                    'lat':22.1066001,
                    'lng':113.5276053
                }
            }
        },
        'place_id':'ChIJ88g14uB6ATQR9qyFtCzje8Y',
        'types':[  
            'country',
            'locality',
            'political'
        ]
    }
];

// way 1
var locObj1 = a[0]['geometry']['location'];
// way 2
var locObj2 = a[0].geometry.location;

console.log("Way1: a[0]['geometry']['location'] = ", locObj1);
console.log("Way2: a[0].geometry.location = ", locObj1);

my bad, typo in rush. that it is not really a string but object. Thanks for catching that.
OP says it's JSON, so either OP's being imprecise or your code should parse it before accessing it. Pick one :)

JPRLCol · Accepted Answer · 2018-02-02 16:15:24Z

0

You can access via object like :

const json = JSON.parse("<your_json>"); // your json between ""

and then

const location = json[0].geometry.location;

console.log (JSON.stringify(location );)

edited Feb 2, 2018 at 16:15

answered Feb 2, 2018 at 15:55

JPRLCol

20012 silver badges30 bronze badges

4 Comments

Federico klez Culloca Over a year ago

const json = <your_json>; and this is why I get angry when people call JSON what are actually object literals.

JPRLCol Over a year ago

@Federico klez Culloca we can also parse the string just in case

Ben.W Over a year ago

Thank you for answering and it works. But what does the [0] mean?

JPRLCol Over a year ago

it`s because that json has [] to group a set of variables. Please check json.org. Also you can select this as the answer if you consider that this works

Collectives™ on Stack Overflow

How can I take specific data from json in JavaScript?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related