How do I return only part of an array from an API call?

Question

I've got a massive list of about 50 dog photos that I'm pulling in from an API into a react component, and I only want to display the first 10. I wrote the following function to attempt to filter out only the first 10 photos url's in the array

setData = async () => {
  const x =  await fetch('https://dog.ceo/api/breed/hound/images')
  const y = await x.json()
  const z = await y.message
  let newArr =[]
  for (let i=0; i<z.length; i++){
    if (i<=10){
      newArr.push(z[i])
    }
  }
  return newArr
}

then used the result of that to set the state

componentDidMount(){
  const dogList = this.setData()
  this.setState({
    dog: dogList
  })
}

....which then was supposed to render just the first 10 dog photos:

render() {
  return (
    <div>
      <h1>Rate My Dogue</h1>
      {
        this.state.dog.map(doggie => {
          return <img className = 'img' src = {doggie}></img>
        })
      }
    </div>
  );
}

}

and unsurprisingly, it didn't work. Does anyone have suggestions on how I can prune my API call?

Here's the full component:

import React from 'react';
import './styles.css'


class App extends React.Component {
constructor(){
  super()
  this.state = {
    dog: []
  }
}

setData = async () => {
  const x =  await fetch('https://dog.ceo/api/breed/hound/images')
  const y = await x.json()
  const z = await y.message
  let newArr =[]
  for (let i=0; i<z.length; i++){
    if (i<=10){
      newArr.push(z[i])
    }
  }
  return newArr
}


componentDidMount(){
  const dogList = this.setData()
  this.setState({
    dog: dogList
  })
}

render() {

  return (
    
     this.state.loading ? <h1> Dogues Loading.....</h1>
    :
    <div>
      <h1>Rate My Dogue</h1>
      {
        this.state.dog.map(doggie => {
          return <img className = 'img' src = {doggie}></img>
        })
      }
    </div>
    
  );
}

}
export default App;

Can you share What output you are getting? the inspected element of img? — Arnab
– Arnab, Commented Jul 12, 2020 at 10:11
Check what you are getting from this.setData(). Console its value. — Rohan Agarwal
– Rohan Agarwal, Commented Jul 12, 2020 at 10:48

Jonathan Akwetey Okine · Accepted Answer · 2020-07-12 11:33:39Z

You have an async function (setData) which returns a promise and to get the value of that async function you need to do a .then() method. So something like this in your componentDidMount

componentDidMount() {
this.setData()
  .then((res) => {
    this.setState({
      dog: res,
    });
  })
  .catch((error) => console.log(error));
 }

Or, make your componentDidMount an async function and await the results of setData.

async componentDidMount() {
try {
  const dogList = await this.setData();
  this.setState({
    dog: dogList,
  });
} catch (error) {
  console.log(error);
}
}

In your question, you stated you wanted the first 10 photos so your setData should have a check like this since your loop is starting at the index of 0.

setData = async () => {
const x = await fetch("https://dog.ceo/api/breed/hound/images");
const y = await x.json();
const z = await y.message;

let newArr = [];
for (let i = 0; i < z.length; i++) {
  if (i <= 9) {
    newArr.push(z[i]);
  }
 }
return newArr;
};

Please don't forget to add a key prop to your map method in the render function.

Collectives™ on Stack Overflow

How do I return only part of an array from an API call?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related