select items from array with splice using a loop

Question

I'm using a pixabay array. I did manage to get the data from my array, but the data contains 20 random pictures. I only want 3 pictures to be seen on my website.

I have used a slice array. Sadly it doesn't work for me, I think I did something wrong. --> Remove items from array with splice in for loop maybe I should use an if function?

This is my code:

{apiImages.map( img => (
                    <Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
                    <a href="/alleblogs">
                    <CardTitle style={{color: '#fff', height: '176px', background: 'url( {  } ) center / cover' }}>Golden Bridge</CardTitle>
                    <CardText>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis distinctio esse qui eos, ad provident,
                    </CardText>
                    <CardActions border>
                    <Button style={{color: '#8dd5e8'}}>Likes:</Button>
                    <Button style={{color: '#8dd5e8'}}>Share</Button>
                    </CardActions>
                    </a></Card>
                ))}

As you can see I've used a loop. This loop only shows 20 cards (no pictures) but my problem is that I only want 3 cards to be shown.

{apiImages.splice(6).map( img =>  ---> This doesn't work either.

I don't know but maybe this code will be useful too (This is where I fetch my api):

componentDidMount() {
        fetch("https://pixabay.com/api/?key=11095386-871fd43c33a92700d9bffb82d&q=travel&image_type=photo&pretty=true")
          .then(res => res.json())
          .then(
            (result) => {
              console.log(result)
              this.setState({
                apiImg: result.hits
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }

Harish Soni · Accepted Answer · 2019-01-03 11:33:04Z

1

You can directly slice your array using Array.slice.

var a = [1,2,3,4,5,6,7,22,34,43,56]

a.slice(0, 3).map((v) => { console.log('Element:', v) })

{apiImages.slice(0, 3).map( img =>  ---> This will work.

answered Jan 3, 2019 at 11:33

Harish Soni

1,89414 silver badges28 bronze badges

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

8 Comments

fay123 Over a year ago

Thanks! I'm happy it finally worked ;) Also thanks for explaining it so well :D

Harish Soni Over a year ago

Glad to help. Can you please upvote and accept my answer. So that if someone comes here gets the answer. Thanks in Advance

fay123 Over a year ago

I'm sorry for bothering you, this will be my last question. Do you know why my website won't show the picturers from my api? I've already used this code: background: 'url( { largeImageURL } ) center / cover' }} but it won't work......... pixabay.com/api/…

Harish Soni Over a year ago

Can you please add the code for the component where you are using this URL?

fay123 Over a year ago

This is part of my code:

{apiImages.map( img => (                     <Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>                     <a href="/alleblogs">                     <CardTitle style={{color: '#fff', height: '176px', background: 'url( {  } ) center / cover' }}>Golden Bridge</CardTitle>                     <CardText>

If you look at my previous question above you can see the whole code.

|

Olga · Accepted Answer · 2019-01-03 11:38:25Z

1

I recommend using slice method that doesn't modify your initial array apiImages:

// create a const that store first 3 images
const firstThreeImages = apiImages.slice(0, 3);
// render them
{firstThreeImages.map(img => //rendering )}

answered Jan 3, 2019 at 11:38

Olga

2171 silver badge8 bronze badges

Collectives™ on Stack Overflow

select items from array with splice using a loop

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related