Trouble display name property from axios fetched json object

Question

https://codesandbox.io/s/currying-voice-toq9t - I am trying to save the json object into the component state, then render the name into the browser.

  getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com....."
      )
      .then(response => {
        this.setState({
          profile: {
            name: response.data.name
          }
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

response.data is an array, do you want to display all profile names or only the first one? If only the first one, name: response.data[0].name will be enough. https://codesandbox.io/s/vibrant-wood-hemcb — SuleymanSah, Oct 07 '19 at 11:47

score 0 · Answer 1 · answered Oct 07 '19 at 11:17

The response.data is an array where in first position there is the information that you are looking for, so the setState should be like this:

this.setState({
      profile: {
        name: response.data[0].name
      }
    });

or

    const [obj] = response.data;
    this.setState({
      profile: {
        name: obj.name
      }
    });

score 0 · Accepted Answer · answered Oct 07 '19 at 11:17

Your Response data is an array form so,You need to give Index.I hope it will helps you.

getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/NISgcRm5hpqtvPF8I0tLkQ/result.json"
      )
      .then(response => {
        this.setState({
          profile: {
            name: response.data[0].name
          }
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

score 0 · Answer 3 · answered Oct 07 '19 at 11:25

Your response.data returns an array.so you need to traverse it inside a loop.

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

export class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { profile: [] };
  }

  componentDidMount() {
    this.getProfile();
  }

  getProfile() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/" +
          "https://phantombuster.s3.amazonaws.com/YRrbtT9qhg0/NISgcRm5hpqtvPF8I0tLkQ/result.json"
      )
      .then(response => {
        console.log("response: ", response)
        this.setState({
          profile: response.data

        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    let { name } = this.state.profile;
    const { error } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Profile</h1>
          {error ? <p>{error.message}</p> : null}
        </header>
        <div className="App-feeds" />
        <div className="panel-list">
        {this.state.profile.map((element) => <p>First Name: {element.name}</p>)}

        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Profile />, rootElement);

Trouble display name property from axios fetched json object

3 Answers3