jQuery getJSON from API how to access object?

Question

I am trying to get JSON from API and then access "main" object of the "weather" object of the JSON.

When I use this code:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139", function(json) {
  var data = JSON.stringify(json);
  alert(data);
});

I get this output:

{
  "coord": {
    "lon": 159,
    "lat": 35
  },
  "weather": [{
    "id": 500,
    "main": "Rain",
    "description": "light rain",
    "icon": "https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F10n.png?1499366021399"
  }],
  "base": "stations",
  "main": {
    "temp": 22.59,
    "pressure": 1027.45,
    "humidity": 100,
    "temp_min": 22.59,
    "temp_max": 22.59,
    "sea_level": 1027.47,
    "grnd_level": 1027.45
  },
  "wind": {
    "speed": 8.12,
    "deg": 246.503
  },
  "rain": {
    "3h": 0.45
  },
  "clouds": {
    "all": 92
  },
  "dt": 1499521932,
  "sys": {
    "message": 0.0034,
    "sunrise": 1499451436,
    "sunset": 1499503246
  },
  "id": 0,
  "name": "",
  "cod": 200
}

Now, the output that I am trying to get is "Rain" (the property of the "main" object of the "weather" object (I hope I said this correctly, I'm a beginner)).

So logically, I would do this:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139", function(json) {
  var data = JSON.stringify(json);
  alert(data["weather"].main);
});

But that doesn't give me any output.

I did some search, and found out that I should parse.

But when I did:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139", function(json) {
  var data = JSON.stringify(json);
  var Jason = JSON.parse(data);
  alert(Jason["weather"].main);
});

I got undefined as my output again.

So, what should my code look like so my output would be "Rain"?

PS: Sorry if I made mistakes in describing my issue, I am really new to JavaScript/jQuery and also English is my second language.

Don't stringify the object if you want to access parts of the object. — Taplar
– Taplar, Commented Apr 10, 2018 at 17:13
@JohnnyBizzle because it's not an FCC problem, but a misunderstanding of how arrays work, I guess — Luca Kiebel
– Luca Kiebel, Commented Apr 10, 2018 at 17:27
This forum is way more active/useful. Also, since this problem isn't related purely to FCC, but applies to general usage of jQuery, I don't see why I shouldn't ask this here. — ondrejm
– ondrejm, Commented Apr 11, 2018 at 11:48

Luca Kiebel · Accepted Answer · 2018-04-10 17:22:43Z

3

You nearly have it, simply add [0] after accessing the weather. Since weather is an Array, you need this to get the data from the first element:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139", 
    json => console.log(json.weather[0].main)
);

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

Also, the getJSON function already parses the JSON for you, no need for additional JSON.parses

edited Apr 10, 2018 at 17:22

answered Apr 10, 2018 at 17:17

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

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

Comments

Sailesh Babu Doppalapudi · Accepted Answer · 2018-04-10 17:18:49Z

0

JSON.Stringify will convert json to string. If you want to access objects, you need JSON object and not string.

weather is an array of objects and you need to access an array using index. As you want 1st object, use json["weather"][0]

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139", function(json){
  alert(json["weather"][0].main);
});

edited Apr 10, 2018 at 17:18

answered Apr 10, 2018 at 17:15

Sailesh Babu Doppalapudi

1,5561 gold badge10 silver badges24 bronze badges

4 Comments

Taplar Over a year ago

Small question. Why the extra local variable?

Danny Fardy Jhonston Bermúdez Over a year ago

Please, add some explanation in your answer.

Sailesh Babu Doppalapudi Over a year ago

@DannyFardyJhonstonBermúdez Just added. Thank you.

Sailesh Babu Doppalapudi Over a year ago

Actually there is no need of that variable.

Collectives™ on Stack Overflow

jQuery getJSON from API how to access object?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related