Store axios (JSON) response in array

Question

I have an array which is being used by another file to map out the contents. I originally hard coded values into this array, but now I'd like to integrate an axios get call to retrieve data, and then store the info from the response into the array. I can successfully get the JSON response with the correct data, but I am stuck on getting the JSON response data into the array. Any help would be greatly appreciated

let theArray = [
{
id: '',
name: '',
},]

useEffect(() => {
        axios
            .get(`/api/data`)
            .then(res => {
                //? need to store res.data.id to theArray.id, and res.data.name to theArray.name
            })
    }, [])

I think this Sylens proposed a good solution, I just posted a new structure below. but is just a matter of different structure @reef — Ruben Saucedo
– Ruben Saucedo, Commented Aug 14, 2019 at 19:34

Sylens · Accepted Answer · 2019-08-14 19:22:54Z

4

You can simply push the response to the array, but you'd have to begin with an empty array, otherwise, the first element you have hardcoded will not have any data.

let theArray = []

useEffect(() => {
        axios
            .get(`/api/data`)
            .then(res => {
                const newItem = {
                  id: res.data.id,
                  name: res.data.name,
                };
                theArray.push(newItem);
             })
    }, [])

answered Aug 14, 2019 at 19:22

Sylens

1,1778 silver badges31 bronze badges

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

3 Comments

Ruben Saucedo Over a year ago

I think this is a good solution, I just posted a new structure below. but is just a matter of different structure

webdesignnoob Over a year ago

Hello, I am quite new to React and was wondering, if you wanted to print this data under render(), could you do "theArray[0].id" ? Also, is useEffect simply just an additional function?

Navid Over a year ago

Is it possible I use this method in app.get(....) in expressjs also? is there any conflict with res.render or not?

Ruben Saucedo · Accepted Answer · 2019-08-14 19:28:52Z

3

Here another solution, I think @Sylens solution is a good one, this is just a matter of structuring your code as you want

let theArray = []

useEffect(() => {
        axios
            .get(`/api/data`)
            .then(res => {
                // object destructuring
                const { id, name } = res.data;
                theArray.push({ id, name })
            })
    }, [])

answered Aug 14, 2019 at 19:28

Ruben Saucedo

2492 silver badges14 bronze badges

1 Comment

webdesignnoob Over a year ago

Hello, I am quite new to React and was wondering, if you wanted to print this data under render(), could you do "theArray[0].id" ? If not, how would I access this information?

joseluismurillorios · Accepted Answer · 2019-08-14 19:23:08Z

1

If your data is in json format you should wait for the info to get parsed, something like this:

let theArray = [
    {
        id: '',
        name: '',
    },
];

useEffect(() => {
    axios
        .get(`/api/data`)
        .then(res => res.json())
        .then((result) => {
            theArray[0].id = result.id;
            theArray[0].name = result.name;
        })
}, []);

Edit: if you want to add the new data just push it to the array

theArray.push({
    id: result.id,
    name: result.name,
})

answered Aug 14, 2019 at 19:23

joseluismurillorios

1,0146 silver badges11 bronze badges

1 Comment

webdesignnoob Over a year ago

Hello, I am quite new to React and was wondering, if you wanted to print this data under render(), could you do "theArray[0].id" ? If not, how would I access this information?

DedaDev · Accepted Answer · 2019-08-14 19:19:58Z

0

If it's only modifying first element:

let theArray = [{ id: '',  name: '',},]

useEffect(() => {
        axios
            .get(`/api/data`)
            .then(res => {
                theArray[0].id = res.data.id
                theArray[0].name = res.data.name
            })
    }, [])

answered Aug 14, 2019 at 19:19

DedaDev

5,2792 gold badges26 silver badges32 bronze badges

2 Comments

webdesignnoob Over a year ago

Hello, I am quite new to React and was wondering, if you wanted to print this data under render(), could you do "theArray[0].id" ? If not, how would I access this information?

joseluismurillorios Over a year ago

You can do render () { return <div>{theArray[0].name}</div> } or render () { return theArray[0].map(d => <div key={d.id}>{d.name}</div>) }

Collectives™ on Stack Overflow

Store axios (JSON) response in array

4 Answers 4

3 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related