Rendering JSON data in react native

Question

I'm currently using my api to render all posts in JSON to react native. But I keep getting this undefined error. And sometimes the data just wont render. Can anyone give me any help on rendering this data in react native? And explain to me what i'm doing wrong? I'm pretty new with JSON. Thanks :)

Here is my JSON:

{"data":[{"id":"1","type":"posts","links":{"self":"https://example.com/posts/1"},"attributes":{"title":"Laughter Post","context":{}},"relationships":{"user":{"links":{"self":"https://example.com/posts/1/relationships/user","related":"https://example.com/posts/1/user"}}}}]}

And here is my react native code:

import React, { Component } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";

export default class App extends Component {
state = {
data: []
};

componentWillMount() {
this.fetchData();
}

fetchData = async () => {
const response = await fetch("https://example.com/posts.json");
const json = await response.json();
this.setState({ data: json.data });
};

render() {
  return (
    <View style={styles.container}>
     <FlatList
      data={this.state.data}
      keyExtractor={item => item.toString()}
      renderItem={({ item }) =>
        <Text>
          {`${item.title}`}
        </Text>}
       />
    </View>
   );
  }
 }

 const styles = StyleSheet.create({
 container: {
 marginTop: 15,
 flex: 1,
 justifyContent: "center",
 alignItems: "center",
 backgroundColor: "#F5FCFF"
 }
 });

Ravi · Accepted Answer · 2018-05-21 05:39:28Z

1

It seems you are accessing title directly from the root, but it is inside key attributes

It should be

{`${item. attributes.title}`}

Or else if you can tell us the exact error, we can help you more regarding this issue.

answered May 21, 2018 at 5:39

Ravi

35.7k22 gold badges126 silver badges188 bronze badges

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

1 Comment

TimmyBuckets Over a year ago

Wow I spent most of my day trying to figure this out. I feel quite stupid. It Worked! thank you so much!

Collectives™ on Stack Overflow

Rendering JSON data in react native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related