Unable to fetch data correctly from JSON array in React Native

Question

  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.

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,  }}
                    />

       }
     ); 
}

`JSON.parse(JSON.stringify(responseJson));` is really weird, although it's not your issue. What's the point ? — nubinub, Feb 01 '19 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. — Shubham Bisht, Feb 01 '19 at 10:17
in your set State method when you are setting whole data in a single state aka DATA, then why do you need to set other first elements extra! in other signal states! please explain!, as far as i know setting up a single state is ok then rest should be done in the 'then' promise of the state in your case! — Rizwan Atta, Feb 01 '19 at 10:30
Hard to figure out without the logic of the FlatList component. But the most probable is that you rely on `state.post_type` which refers to the first object post_type, while image and video are referring to the currently iterated object. — nubinub, Feb 01 '19 at 10:31
@Rizwanatta can you please answer it with a demo code which works in my case. :) — Shubham Bisht, Feb 01 '19 at 10:32
@nubinub can you please answer with how to access object in Json array and use in Flatlist in an ideal case? If you could give an example, that would be really helpful. :) — Shubham Bisht, Feb 01 '19 at 10:34
@ShubhamBisht try doing `item. image` & `item.video` for the `source` attribute in your Updated Code. Also, remove extra `}` on `Image` tag — deadcoder0904, Feb 01 '19 at 11:25
@deadcoder0904 my source is fine. Actually, `image` and `video` are the variables I've created and I'm using them in `source`. — Shubham Bisht, Feb 01 '19 at 11:28
@ShubhamBisht then you should try explaining the question properly. i can't understand anything — deadcoder0904, Feb 01 '19 at 11:29
@deadcoder0904 It's a confusing problem actually. Instead, can you please tell me how can I access object in Json array and use in Flatlist in an ideal case? — Shubham Bisht, Feb 01 '19 at 11:35
@ShubhamBisht you really need to **paste** the json response result from your api call into your question. I know you have put it as an image, but that is a discourtesy to those that are trying to help you. If you post it as text people can see what you are receiving and what you are working with, they can also work with it. See this for more details https://meta.stackoverflow.com/a/285557/5508175 — Andrew, Feb 01 '19 at 15:19
@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 - https://stackoverflow.com/q/54257762/6141587 or https://stackoverflow.com/q/50603994/6141587 — deadcoder0904, Feb 01 '19 at 15:49

score 0 · Answer 1 · edited Feb 01 '19 at 13:56

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

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 — Shubham Bisht, Feb 01 '19 at 11:37

Unable to fetch data correctly from JSON array in React Native

1 Answers1