How to push multiple json (response ) in single array?

Question

i need data in this form [{..},{..},{..}]. i create blank array const arr = [] and all json data push in this Array. arr.push(data) the output is [{..}] [{..}] but i need all object in one array. how to fix it?

  // const arr = []
  const [data, setData] = useState()
  // const [arrData, setArrData] = useState()
  useEffect(() => {
  const data = JSON.parse(localStorage.getItem('Cart'));
  if (!data) {
    console.log('go to empty Cart')
  } else {
    data.map(async (v) => {
      try {
        axios.get(`/cart/${v}`)
        .then(res=>setData(res.data))
        .catch(e=>{console.log(e)})
      } catch (e) {
        console.log(e);
        navigator('/Login');
      }
    })
  }    
  }, [])
  // arr.push(data)
  console.log(data)

Output

{_id: '61ed1af4ac1a79e2c4f45937', title: 'Birthday bannner Template Tranding Template', DiscountPrice: 149, OriginalPrice: 199, category: 'Birthday Banner', …}


{_id: '61ec1b25689c12b75aa2929a', title: 'Birthday Banner Marathi Template', DiscountPrice: 149, OriginalPrice: 200, category: 'Birthday Banner', …}

Welcome to SO. You might find reading the site help section useful when it comes to asking a good question, and this question checklist. Code that you have worked on to solve the problem should include a minimal reproducible example, and be included in your question. — Andy
– Andy, Commented Feb 2, 2022 at 4:32

TRomesh · Accepted Answer · 2022-02-02 04:43:59Z

1

Hi @Shreyash Kolhe you can try something like this.

const [data, setData] = useState([]);

with useState you will have the data and a setter function to set data. In your Axios call, you can set the data as below.

setData(preData => [...preData, res.data]);

The preData will hold the previous data which you current state data. This will append the new data with the old data you have in your state. Please share the code next time it will help the community to help you out more effectively.

answered Feb 2, 2022 at 4:43

TRomesh

4,4698 gold badges51 silver badges79 bronze badges

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

Comments

Erick · Accepted Answer · 2022-02-02 04:41:39Z

You could use the spread operator to push objects to an array. Refer to the sample code

import React, { useState } from 'react';
import './style.css';

const App = () => {
  const [data, setData] = useState([]);
  const [count, setCount] = useState(1);

  const handleClick = () => {
    // your response from the API call
    const dataObj = {
      id: count,
      name: 'some name',
      title: 'some title',
    };
    setCount((prevCount) => prevCount + 1);
    setData([...data, dataObj]); // should work fine with your implementation as well
  };
  return (
    <div>
      <button onClick={handleClick}>Click to add</button>
      {data.map((item) => (
        <div key={item.id}>
          {item.id} {item.name}
        </div>
      ))}
    </div>
  );
};
export default App;

Collectives™ on Stack Overflow

How to push multiple json (response ) in single array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related