-1
  showPosts = async () => {

    var userID = await AsyncStorage.getItem('userID');

    fetch(strings.baseUri+"getPostWithUserID", {
        method: 'POST',
        headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            "user_id": userID
        })
        })
        .then((response) => response.json())
        .then((responseJson) => {

        let jsonObj = JSON.parse(JSON.stringify(responseJson));

        if (jsonObj.status=="true") {

            this.setState({ 
                data: responseJson.data, 
                imageSrc: responseJson.data[0].imgSrc, 
                post_type: responseJson.data[0].post_type,
                videoSrc: responseJson.data[0].video,
            });
        }        
    })
        .catch((error) => {
            console.error(error);
        });
  }

I'm fetching data from api and then using it in Flatlist.

enter image description here

This is what I get when I alert(responseJson.data). Now, my responseJson.data[0].imgSrc and responseJson.data[0].video iterates each object and I'm able to display it on my screen via Flatlist. But this isn't the case in responseJson.data[0].post_type. responseJson.data[0].post_type fetches only post_type of first object from the JSON array. I've also added this.state.post_type in extraData.

Please tell me how to access data from Json array and then use it in Flatlist.

UPDATED CODE

    <FlatList 
        data={this.state.data}
        renderItem={ ({item,index}) =>  this._renderItem(item,index)  }
        extraData={[ this.state.data, this.state.checked, this.state.post_type ]}
    />

_renderItem = ( item, index ) => {

return(

{ item.post_type == "image" ? 

                    <Image 
                        //source={this.props.item.image} 
                        source={image}}
                        //source={{ uri: strings.sourceUri+"userimage/"+item.imgSrc }}
                        style={styles.photo}
                    />

                    :

                    <Video 
                        source={video}
                        ref={(ref) => { this.player = ref }}   
                        style={{  width: 300,  height: 350,  }}
                    />

       }
     ); 
}
16
  • 3
    JSON.parse(JSON.stringify(responseJson)); is really weird, although it's not your issue. What's the point ? Commented Feb 1, 2019 at 10:14
  • I want my image to be shown on screen when my post_type is image and show on video on screen when post_type is video. But the post_type is only accessed from the first object of json array. Commented Feb 1, 2019 at 10:17
  • Can you show us your render method ? Commented Feb 1, 2019 at 10:19
  • 1
    @ShubhamBisht then you should try explaining the question properly. i can't understand anything 😂 Commented Feb 1, 2019 at 11:29
  • 1
    @ShubhamBisht you really need to take some efforts in explaining your problem well. nobody can help you unless you take the efforts to post a nicely edited question. some examples of well-asked questions - stackoverflow.com/q/54257762/6141587 or stackoverflow.com/q/50603994/6141587 Commented Feb 1, 2019 at 15:49

1 Answer 1

0

can you check if this works or not ?

 <FlatList 
    data={this.state.data}
    renderItem={ ({item,index}) =>  this._renderItem(item,index)  }
    extraData={[ this.state.data, this.state.checked, this.state.post_type ]}
/>

_renderItem = ( item, index ) => {
    if( item.post_type === "image")
     return(
                <Image 
                    //source={this.props.item.image} 
                    source={image}
                    //source={{ uri: strings.sourceUri+"userimage/"+item.imgSrc }}
                    style={styles.photo}
                />);

     else
            return(
                <Video 
                    source={video}
                    ref={(ref) => { this.player = ref }}   
                    style={{  width: 300,  height: 350,  }}
                />);

}

also see that in <Image> after source there are two source ways I gave

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

1 Comment

Actually I've a long code inside _renderItem. Therefore i didn't posted entire code and just posted the Image and the Video component only. And if I try it your way, I'll be having a large code because most of the code inside _renderItem will be repeated then

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.