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
              });
            }
          )
      }

score 1 · Accepted Answer · answered Jan 03 '19 at 11:33

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 03 '19 at 11:33

Harish Soni

1,796
12
27

Thanks! I'm happy it finally worked ;) Also thanks for explaining it so well :D – fay123 Jan 03 '19 at 11:39
Glad to help. Can you please upvote and accept my answer. So that if someone comes here gets the answer. Thanks in Advance – Harish Soni Jan 03 '19 at 11:40
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......... https://pixabay.com/api/?key=11095386-871fd43c33a92700d9bffb82d&q=travel&image_type=photo&pretty=true – fay123 Jan 03 '19 at 16:32
Can you please add the code for the component where you are using this URL? – Harish Soni Jan 04 '19 at 05:06
This is part of my code: `{apiImages.map( img => ( Golden Bridge ` If you look at my previous question above you can see the whole code. – fay123 Jan 04 '19 at 10:01
replace your `background: 'url( { } ) center / cover'` `background: largeImageURL` – Harish Soni Jan 04 '19 at 10:03
`Golden Bridge` This is what I get back ---> ./src/components/Alleblogs.jsx Line 49: 'largeImageURL' is not defined no-undef – fay123 Jan 04 '19 at 10:15
It's weird because my computer shows my images in the console but not on my screen. http://tinypic.com/view.php?pic=33avsef&s=9#.XDB96FxKjIU – fay123 Jan 05 '19 at 09:51

score 1 · Answer 2 · answered Jan 03 '19 at 11:38

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 03 '19 at 11:38

Olga

217
1
8

select items from array with splice using a loop

2 Answers2