CODEWITHSUNDEEP
reactjsreact-redux
ydrea
ydrea

Reputation: 95

How to get an array of icon names from multiple map function calls?

I am trying to get icon names from a weather API, and have my react display the icons.

The first part is working, the icon names do appear in the console log. The second part does not...

import { useSelector } from "react-redux";

export default function Icon() {
  const icons = useSelector(
    (state) =>
      state.api.map((i) => {
        console.log(i);
        i.city.list.map((ii) => {
          console.log(ii);
          ii.weather.map((iii) => {
            console.log("icon", iii.icon);
            return iii.icon;
          });
        });
      })
    //state.api[0].city.list[0].weather[0].icon
  );
  console.log(icons);
  return (
    <div>
      <img src={`https://openweathermap.org/img/wn/${icons}.png`} />
    </div>
  );
}

Any ideas?

Upvotes: 0

Views: 102

Answers (2)

axordahaxor
axordahaxor

Reputation: 178

From what you've provided so far it seems to work like so: Make an API call to api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key} and it gives you the response. From that response icon data can be reached for example like this:

  const obj = api response as javascript object...
  const icon = obj.list[0].weather[0].icon;

and used like you've shown:

<img src={`https://openweathermap.org/img/wn/${icon}.png`} alt="icon" />

However, we can't see what your redux state model is and how requests are eventually saved to state and so on. Which is why it is not obvious what

//state.api[0].city.list[0].weather[0].icon

does as we don't know anything about state.api[0]. This is why it is essential to provide enough information to help you solve the problem at hand. You could've just posted us the openweather data api response example or even better, redux state from that useSelector without any mappings.

People are hesitant to help when they need to get credentials for an API when you could've just provided the information to begin with.

Not trying to be rude here, but make it as easy as possible to help you and things get resolved very quickly :) this is certainly not a tough one to solve when you have all the info needed.

You could show us the state completely and we'll solve it from there or probably come to the conclusion that there is some problem with the first part, meaning state.api[0] or state.api[0].city We can't know how you save the state, but in API you provided city for example doesn't have icon, but that list owns icons. But the tricky part here is that this is all quessing without the actual state.

Upvotes: 1

Display name
Display name

Reputation: 467

Please provide more info

Without knowing an example of the icons variable, there is not much help that we can provide.

For now however, I will infer from the code that icons holds an array or some iterable content.

In my experience with java, it will try to apply the array object to the image src which will of course not work.

Generic example of what may work

What you should do is map the icons similar to this:

import { useSelector } from "react-redux";

export default function Icon() {
  const icons = useSelector(
    (state) =>
      state.api.map((i) => {
        console.log(i);
        i.city.list.map((ii) => {
          console.log(ii);
          ii.weather.map((iii) => {
            console.log("icon", iii.icon);
            return iii.icon;
          });
        });
      })
    //state.api[0].city.list[0].weather[0].icon
  );
  console.log(icons);
  return (
    <div>
      {icons.map((e,i)=>{
          return <img src={`https://openweathermap.org/img/wn/${e}.png`} key={"iconsImg"+i}/>
      })}
    </div>
  );
}

Upvotes: 1

Related Questions