Map object with URL to return object

Question

I loop through this array like this:

{props.choosenMovie.characters.map((characters) => (
   <p>{characters}</p> /* This displays the URL of course */
))}

These URL's include a name object which is what i want to display, what is the best practice to do this?

This is how it is displayed on my application, but the desire is to display the name object from the URL's.

On a different note, if possible I recommend to enhance your API to accept multiple "people" at once and not looping various calls unless really required. If you have can change the API that is. Edit: Never mind.. seems to be some public API. — Lain
– Lain, Commented Jun 15, 2020 at 13:21
Sorry, the list is displaying the URL's from the object. But i want the list to retrieve the name object from the URL. — Arasto
– Arasto, Commented Jun 15, 2020 at 13:21
@PrakashReddyPotlapadu All the url's include a name object. if we use swapi.dev/api/people/56 as an example. I want it to return "Saesee Tiin"(since it's the name of the object). My desire is that my array of URL's should be looped through and do http calls and return the name of these characters. — Arasto
– Arasto, Commented Jun 15, 2020 at 13:33

Guru Hadadi · Accepted Answer · 2020-06-15 13:45:35Z

1

In useEffect, map thru your array of urls and make the api call and store the promises in an array. Use promise.all and update the state which will cause re-render.

In render method map thru the updated state and display the names.

see working demo

Code snippet

export default function App() {
  const [char, setChar] = useState([
    "https://swapi.dev/api/people/1/",
    "https://swapi.dev/api/people/2/"
  ]);
  const [people, setPeople] = useState([]);
  useEffect(() => {
    const promiseArray = [];
    char.forEach(c => {
      promiseArray.push(fetch(c).then(res => res.json()));
      Promise.all(promiseArray).then(res => {
        console.log("res", res);
        setPeople(res);
      });
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {people.map((p, i) => {
        return <p key={i}>{p.name}</p>;
      })}
    </div>
  );
}

answered Jun 15, 2020 at 13:45

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arasto Over a year ago

This is what i was looking for, thank you for sharing your knowledge <3

Matt · Accepted Answer · 2020-06-15 13:21:50Z

I was working with that API some time ago, and the way I approached it (to display the names etc) was with Promise.all

so the snipped looked like

axios.get(`https://swapi.dev/api/${this.props.match.path.split('/')[1]}/${this.props.match.params.id}/`).then((res) => {

            let characters = []

            // get all characters in the movie data
            let characterPromises = []
            res.data.characters.forEach((character) => {
                characterPromises.push(axios.get(character))
            })

            // Create list with all characters names and link to page
            Promise.all(characterPromises).then((res) => {
                res.forEach((character, i) => {
                    characters.push(<li key={i}><Link to={`/${character.data.url.split('api/')[1]}`}>{character.data.name}</Link></li>)
                })

                this.setState({
                    characters
                })
          })
  })
}

then I just used the characters lists (from state) in the render method

Collectives™ on Stack Overflow

Map object with URL to return object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related