Need help accessing this object?

Need help accessing this object?
0.0 0

#1

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":"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 }

This is the part that contains the icon:

 "weather":[ { "id":500, "main":"Rain", "description":"light rain", "icon":"https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F10n.png?1499366021399" } ]

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:

  • data.weather[4];
  • data.weather[0];
  • data.weather.icon;
  • data.weather[3]

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:


#2

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": "https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F10n.png?1499366021399"
  }
]

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.


#3

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:


#4

Your second attempt:

data.weather[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.


#5

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

var icon = data.weather[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?


#6

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


#7

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.

https://codepen.io/Mike-was-here123/pen/oGWxam?editors=1111


#8

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 = data.weather[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;

#9

so

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

#10

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.


#11

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


#12

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


#13

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:


#14

Glad I could help you.


#15

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


#16

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.