Need help accessing this object?

Need help accessing this object?
0.0 0


I’m basically trying to extract the icon url from this object, this is for my weather api project which can be found here. . This is to change the src of my filler image.

api im using.

(if you look in the console my codepen you can see the formatted version)

{ "coord":{ "lon":159, "lat":35 }, "weather":[ { "id":500, "main":"Rain", "description":"light rain", "icon":"" } ], "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 }

This is the part that contains the icon:

 "weather":[ { "id":500, "main":"Rain", "description":"light rain", "icon":"" } ]

Im trying to get the url so i can input the image next to my temperature (change the src of the filler image).

I have tried (data is my parameter) these ways so far:


I have tried these, console.log() comes out undefined. Do they work and i made a mistake somewhere else??

I also don’t know if its how i’m changing my image, if i can edit he src like that. Do i have the wrong codepen add-on’s? Is that function correct? If you look in my JS, i used a comment to indicate where that function is (at the bottom). I also don’t know if their is something wrong with my image itself. Its been a long time since i have done html, sorry if i made a simple mistake their.

Thanks for reading :smile:


When viewing weather formatted as below, you can see that weather is an array with only one element (an object with id, main, description, and icon properties). Question: How would you access the first element of an array in general?

"weather": [
    "id": 500,
    "main": "Rain",
    "description": "light rain",
    "icon": ""

You were close to the solution with your 2nd attempt (the middle), but you need to add the icon property on the end with dot notation.


Using numbers. Like 0 is the 1st element, etc. I have never worked with a object this complex/ big. So i’m having a little trouble :slightly_frowning_face:


Your second attempt:[0];

accessed the first element (an object) of the weather array. Now you just need to reference the icon property of that object using dot notation.


That worked! :smiley: I was able to get the image itself. Now the only trouble i’m having changing my image.

var icon =[0].icon;

The function i’m using:

function changeImage() {
            var parent = documeent.getElementById("y");
            parent.getElementsByTagName("img")[0].src = icon;
          } // change img

I got this from someone else who was having a similar issue, any idea why this wont work?


Let me take a look at your Codepen and get back with you.


Its in a codepen, JS, near the bottom is the function i used to change the image (well tried). The image i’m trying to change is on line 10 in html.


The code:

          function changeImage() {
            var parent = documeent.getElementById("y");
            parent.getElementsByTagName("img")[0].src = icon;
          } // change img

is currently inside your $("#convert").on(“click”, function() {

so even if you called the function (which you have not), it would not run unless you click the “Convert to …” button.

There is a much simpler way to change the image by making use of your existing line:

var icon =[0].icon;

On the next line, you can use part of your changeImage function code (once you fixing the typo of document. You had documeent instead of document.

var parent = document.getElementById("y");

Finally, you can change the image using the src attribute of parent (the img element) like:

parent.src = icon;



 function changeImage() {
            var parent = document.getElementById("y");
            parent.src = icon;
          } // change img


Yes, you can do that too, but you the function must be accessible to where you call it from. Plus, you need to call it from somewhere.


Worked :smiley: thanks a bunch, is their anyway to send cookies like on gitter? Pretty knew here :stuck_out_tongue:


You can click the heart icon to “like” it.


Thanks so much dude. You were a great help :smiley:

Now i just have to edit my html and fix everything from being out of place :smile:


Glad I could help you.


How do i mark a reply as “solution” or just mark this thread/ topic as “solved”?


There used to be a little box beside the heart icon of a particular reply which you could check to show solved, but only you can see it since you started the topic.