Merge two arrays into one Array of objects React

Question

I want merge two separate arrays into one array of objects

const [price, setPrice] = useState([100,200,400, 700])
const [fruits, setFruits] = useState(['apple,'orange','banana','guava'])
const [sampleArray, setSampleArray] = useState([])

const mergeArray= ()=>{
setSampleArray()
}

result should be like this: console.log(sampleArray) [{fruit:'apple',price:100},{fruit:'orange',price:100,200,400},{fruit:'banana',price:400},{fruit:'guava',price:700},]

on buttonClick

<button onClick={mergeArray}>Merge Array</button>

SARAN SURYA · Accepted Answer · 2022-01-05 06:57:59Z

3

Here is how you can do it in one line

const [price, setPrice] = useState([100,200,400, 700])
const [fruits, setFruits] = useState(['apple','orange','banana','guava'])
const [sampleArray, setSampleArray] = useState([])

const mergeArray= ()=>{
    setSampleArray(fruits.map((fr, i) => ({"fruit" : fr, "price" : price[i]})))
}

Explanation : So this will map the existing array of fruits and it will return each element as a json data with the price key that is accessed using the index. Also using maps in setState works easier with state change in react. The map will yield a array as a result and you can directly use them with the state change.

answered Jan 5, 2022 at 6:57

SARAN SURYA

5545 silver badges18 bronze badges

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

2 Comments

Arman Ebrahimi Over a year ago

fruits & price inside map method not must be inside " ".

SARAN SURYA Over a year ago

@ArmanEbrahimi, This is a user preference on how you are wishing to to store your key values, Both works.

sptm · Accepted Answer · 2022-01-05 06:49:53Z

2

You can do it like this:

const mergeArray = [];
for (i = 0; i < fruits.length; i++) {
  mergeArray[i] = { fruit: fruits[i], price: prices[i] };
}

answered Jan 5, 2022 at 6:49

sptm

3192 silver badges10 bronze badges

Comments

sedhal · Accepted Answer · 2022-01-05 06:50:37Z

0

You can do this using the map function to merge 2 array columns in a single array of objects.

let array = [];
fruits.map((fruit, i) => {
  let json = {
    [fruit]: price[i]
  }
  array.push(json);
})
setSampleArray(array);

answered Jan 5, 2022 at 6:50

sedhal

5304 silver badges13 bronze badges

Comments

Muhammad Awais · Accepted Answer · 2022-01-05 06:50:51Z

0

you can use javascript concat function for this, update your funtion with this

  const mergeArray= ()=>{
      const mergeArray= price.concat(fruits);
     setSampleArray(mergeArray) 
}

answered Jan 5, 2022 at 6:50

Muhammad Awais

1171 silver badge3 bronze badges

Comments

Yves Kipondo · Accepted Answer · 2022-01-05 07:00:26Z

0

As for each fruit in the fruits state there is a price in the price state. You can loop over each fruit and create an object with fruit and price key like bellow using the Array.prototype.reduce

const price = [100,200,400, 700];
const fruits = ['apple','orange','banana','guava'];

const result = fruits.reduce((accumulator, currentFruit, index) => {
  return accumulator.concat({
      fruit: currentFruit, 
      price: price[index]
  });
},[]);

console.log(result);

answered Jan 5, 2022 at 7:00

Yves Kipondo

5,6931 gold badge22 silver badges33 bronze badges

Comments

jsejcksn · Accepted Answer · 2022-01-05 07:32:59Z

You can use a function to combine multiple arrays, assigning each value to a key at its index. This will work not just for those two arrays, or only two arrays, but any number of arrays:

function combine (collections) {
  const entries = [...Object.entries(collections)];
  const length = entries[0]?.[1]?.length ?? 0;
  const result = [];
  for (const [name, array] of entries) {
    if (array.length !== length) throw new Error('Non-uniform array lengths');
    for (let i = 0; i < length; i += 1) {
      const item = result[i] ??= {};
      item[name] = array[i];
    }
  }
  return result;
}

and then use it in your component:

const merge = () => {
  const merged = combine({
    price: prices,
    fruit: fruits,
  });
  setSampleArray(merged);
};

Working demo:

<div id="root"></div><script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

const {useState} = React;

function combine (collections) {
  const entries = [...Object.entries(collections)];
  const length = entries[0]?.[1]?.length ?? 0;
  const result = [];
  for (const [name, array] of entries) {
    if (array.length !== length) throw new Error('Non-uniform array lengths');
    for (let i = 0; i < length; i += 1) {
      const item = result[i] ??= {};
      item[name] = array[i];
    }
  }
  return result;
}

function Example () {
  const [prices, setPrices] = useState([100, 200, 400, 700]);
  const [fruits, setFruits] = useState(['apple', 'orange', 'banana', 'guava']);
  const [sampleArray, setSampleArray] = useState([]);

  const merge = () => {
    const merged = combine({
      price: prices,
      fruit: fruits,
    });
    setSampleArray(merged);
  };

  return (
    <div>
      <button onClick={merge}>Merge</button>
      <div>{
        sampleArray.length > 0 ?
          sampleArray.map(({fruit, price}, index) => (
            <div key={index}>{fruit} = {price}</div>
          ))
          : 'Not merged yet'
      }</div>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>

Collectives™ on Stack Overflow

Merge two arrays into one Array of objects React

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related