CODEWITHSUNDEEP
javascriptjsonreactjsreact-native
crod
crod

Reputation: 235

How do I access string of json object in React Native

I am trying to make an app that displays quotes from a famous person (e.g. Bob Dylan) using the wiki quote api.

The request url looks like this:

https://en.wikiquote.org/w/api.php?format=json&action=parse&page=Bob_Dylan&prop=text

I have the React Native request working with:

componentWillMount() {
Api().then((response) => {
  this.setState({
    quote:response.parse.text

  })

});
}

When I try to display the quote, however, it is in the form of an object and get [object object] in the view. In the console I receive:

Possible Unhandled Promise Rejection (id: 0): Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text. Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text.

When I try response.parse.text.* I receive a token error. Any suggestions how to fix this ?

Upvotes: 3

Views: 11590

Answers (2)

Vikiesakki
Vikiesakki

Reputation: 31

You can use response.text() instead of response.json()

var url = 'https://en.wikiquote.org/w/api.php?
 fetch(url)
   .then((response) => response.text())
   .catch((error) => console.warn("fetch error:", error))
   .then((response) => console.log(response.parse))

Upvotes: 0

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

You have to explicitly turn response into Object , by calling its json() method, like:

 var url = 'https://en.wikiquote.org/w/api.php?format=json&action=parse&page=Bob_Dylan&prop=text';

 fetch(url)
   .then((response) => response.json())
   .catch((error) => console.warn("fetch error:", error))
   .then((response) => console.log(response.parse))

Working example: https://rnplay.org/apps/EqyMdA

Upvotes: 3

Related Questions