Need help accessing this object?

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:

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:

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?

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;
1 Like
9

so

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

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

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:

15

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