How to store data from json API response into array in ReactJS?

Question

So I have a database set up and I am trying to pull the info from it and store it into a state array so I can use it on the website.

This is an example of what I get when I request form the database, shortened for readability

{
    "count": 10,
    "next": null,
    "previous": null,
    "results": [
        {
            "var1": "Test",
            "var2": "",
            "NeededInfo": "name1",
        },
        {
            "var1": "Test",
            "var2": "",
            "NeededInfo": "name2",
        }
    ]
}

So what I need is to take the NeededInfo of each object and store it into an array so I can use it on render(). This is what I'm trying, but when I do printToConsole() (not shown but just a console.log(this.state)) to see what the state array looks like, the "other" array is undefined

const title_URL = "http://123.456.789/namelist";

class Project extends Component {
  constructor(props) {
    super(props);

    this.state = {
      random1: "",
      random2: "",
      other: [],
      items: []
    }
  }

  componentDidMount() {
    fetch(title_URL)
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.setState({
          other: data.results.NeededInfo
        })
      });
  }

I need the "other" array to look like

other: ["name1", "name2"]

because in my render() I have to list the names that the site pulls from the database so the user can see the names of the listed items and do some other stuff with it, and then I can save that into the "items" array, in a new order, but that part works with if I have a preset "other" array.

You can mark and accept the answer if its works fine, so others can see it, Thanks — Ashish Kamble
– Ashish Kamble, Commented Jun 27, 2019 at 9:13

TLePhan · Accepted Answer · 2019-06-27 03:11:19Z

2

You need to get NeededInfo from your result and push it into a temporary array (store NeededInfo values only), then just set it into state. For example:

componentDidMount() {
    fetch(title_URL)
        .then(response => {
            return response.json();
        })
        .then(data => {
            // Here you need to use an temporary array to store NeededInfo only 
            let tmpArray = []
            for (var i = 0; i < data.results.length; i++) {
                tmpArray.push(data.results[i].NeededInfo)
            }

            this.setState({
                other: tmpArray
            })
        });
}

answered Jun 27, 2019 at 3:11

TLePhan

1,3393 gold badges15 silver badges28 bronze badges

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

Comments

Jack Bashford · Accepted Answer · 2019-06-27 03:00:25Z

2

Use map and extract the wanted property:

other: data.results.map(({ NeededInfo }) => NeededInfo)

answered Jun 27, 2019 at 3:00

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

Syntax · Accepted Answer · 2019-06-27 03:05:54Z

1

Results is an array of documents.

You cannot access the property of documents inside that array without telling JavaScript that where is that documents inside the array ( index of needed document ).

Create for loop , use I start from 0 , to length of results , and you will be able to use that documents property.

answered Jun 27, 2019 at 3:05

Syntax

1371 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to store data from json API response into array in ReactJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related