How can I save Json response as a string react native JS-CodePudding

Java script react native, store API query response as a string

Hello,

Please find my react native javascript code below,

It currently queries 1 random word and renders it to the screen, However, I now need to save it as a string

I need to store the responded word as a string that can then be manipulated further, but cant remember how o go about storing the single JSON response word as a string.

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    console.log("in constructor");
    // create three state variables.
    // apiData is an array to hold our JSON data
    // isFetched indicates if the API call has finished
    // errorMsg is either null (none) or there is some error
    this.state = {
      apiData: [],
      isFetched: false,
      errorMsg: null
    };
  }
  // componentDidMount() is invoked immediately after a
  // component is mounted (inserted into the tree)

  async componentDidMount() {
    try {
      const API_URL = "https://random-word-api.herokuapp.com/word?number=1";
      // Fetch or access the service at the API_URL address
      const response = await fetch(API_URL);
      // wait for the response. When it arrives, store the JSON version
      // of the response in this variable.
      const jsonResult = await response.json();

      // update the state variables correctly.
      this.setState({ apiData: jsonResult });
      this.setState({ isFetched: true });
    } catch (error) {
      // In the case of an error ...
      this.setState({ isFetched: false });
      // This will be used to display error message.
      this.setState({ errorMsg: error });
    } // end of try catch
  } // end of componentDidMount()

  // Remember our three state variables.
  // PAY ATTENTION to the JSON returned. We need to be able to
  // access specific properties from the JSON returned.
  // Notice that this time we have three possible returns for our
  // render. This is conditional rendering based on some conditions

  render() 

  {
    if (this.state.errorMsg) {
      return (
        <div className="error">
          <h1>An error has occured in the API call</h1>
        </div>
      ); // end of return.
    } else if (this.state.isFetched === false) {
      return (
        <div className="fetching">
          <h1>We are loading your API request</h1>
        </div>
      ); // end of return
    } else {
      // we have no errors and we have data
      return (
        <div className="App">
          <div className="WordTable">
            <h1>Hangman - API Fetch Call</h1>
            {this.state.apiData.map((word) => (
              <tr>{word}</tr>
            ))}
          </div>
        </div>
      ); // end of return
    } // end of the else statement.
  } // end of render()
} // end of App class
export default App;

CodePudding user response：

use JSON.stringify() to convert json array to String

CodePudding user response：

Workaround would be like

this.state = {
    apiDataString: "", // new added
    ....
};

// when response received 
const jsonResult = await response.json();

// convert result in string and add in state
this.setState({ apiData: JSON.stringify(jsonResult) });