How to update values of every object in an array of objects in Javascript?

Question

I'm trying to update a value of car in all objects in an array(data) with the values from newData, my code is:

import "./styles.css";

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];


export default function App() {
  return (
    <div className="App">
      {data?.map((item) => {
        return <li key={item.id}>{item.car}</li>;
      })}
    </div>
  );
}

I don't know how to change car values in data with values from newData, so data would be like this:

const data = [
  { id: 1, car: "Audi", owner: "BM" },
  { id: 2, car: "Bentley", owner: "DK" },
  { id: 3, car: "BMW", owner: "JA" },
  { id: 4, car: "Buick", owner: "DS" }
];

codesandbox

Later in code I'm mapping through data and I need to display updated car values, I'm not sure which method to use. Any help greatly appreciated.

CertainPerformance · Accepted Answer · 2021-04-23 02:53:57Z

14

Just take the index of the object being iterated over, and look it up in the newData array?

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];

const newCars = data.map((obj, i) => ({ ...obj, car: newData[i] }));
console.log(newCars);

answered Apr 23, 2021 at 2:53

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Comments

DecPK · Accepted Answer · 2021-04-23 02:54:50Z

You can achieve result with using map over data or newData

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" },
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];
const result = newData.map((c, i) => {
  return { ...data[i], car: c };
});

console.log(result);

with map over newData

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" },
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];
const result = data.map((obj, i) => {
  return { ...obj, car: newData[i] };
});

console.log(result);

Salah Ben Bouzid · Accepted Answer · 2021-04-23 04:59:34Z

1

you can with a button when you click it all the new car values gonna update. but the UI will not update. let's pretend that you have an initial array and you want to override all the car values you have to create a new variable with useState() hook and put data array as the initial value. then you have to do a useeffect() hook to update the state after you get the new car data from the server, or put a settimeout() and update the state with it

  [data,setdata]=useState(data)

   useEffect(() => {
   /// do whatever with the original array (data)

  setTimeout(() => {
  /// update the state 
  setdata(thenewarry)
  }, 3000);
  }, []);

edited Apr 23, 2021 at 4:59

answered Apr 23, 2021 at 3:11

Salah Ben Bouzid

4115 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to update values of every object in an array of objects in Javascript?

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