Need help accessing this object?

Need help accessing this object?


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.