What is the best way to retrieve a specific property (such as key/value) from an array of objects using JavaScript?

Question

What is the best way to retrieve a specific property (such as key/value) from an array of objects using JavaScript?

Below is an array of objects:

data1 = [{id: 111, option: "ONE", actualPrice: 600, price: "450"}, {id: 112, option: "TWO", actualPrice: 700, price: "850"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

I have updated the price property for ids 111 and 112. The updated array of objects now looks like:

data1 = [{id: 111, option: "ONE", actualPrice: 600, price: "650"}, {id: 112, option: "TWO", actualPrice: 700, price: "440"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

Now, I need to extract only the particular properties in the form of an array of objects for keys whose values were changed. I want the extracted data in the following format and pass it to a function called handleUpdate:

I require the array of objects in the below format: const modifiedObj = [{actualPrice: 600, price: "650"}, {actualPrice: 700, price: "440"}]

handleUpdate(modifiedObj);

javascript arrays

Answer 1

Answer №1

let list1 = [{id: 111, option: "ONE", actualPrice: 600, price: "450"}, {id: 112, option: "TWO", actualPrice: 700, price: "850"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

let list2 = [{id: 111, option: "ONE", actualPrice: 600, price: "650"}, {id: 112, option: "TWO", actualPrice: 700, price: "440"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

let updatedItems = [];
for(let index=0;index<list1.length;index++){
  if(list1[index].price!==list2[index].price){
    updatedItems.push({actualPrice: list1[index].actualPrice, price:list2[index].price});
  }
}

console.log(updatedItems);

Answer 2

let list1 = [{id: 111, option: "ONE", actualPrice: 600, price: "450"}, {id: 112, option: "TWO", actualPrice: 700, price: "850"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

let list2 = [{id: 111, option: "ONE", actualPrice: 600, price: "650"}, {id: 112, option: "TWO", actualPrice: 700, price: "440"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

let updatedItems = [];
for(let index=0;index<list1.length;index++){
  if(list1[index].price!==list2[index].price){
    updatedItems.push({actualPrice: list1[index].actualPrice, price:list2[index].price});
  }
}

console.log(updatedItems);

Answer 3

Answer №2

Check out the link below for further insights. Consider using Array.prototype.some() if you need to determine whether any element satisfies a specified condition.

Exploring array objects

Alternatively, you may find the following code snippet helpful:

let results = []
data1.forEach((item, index) => {
    if (data1[index].price !== data2[index].price) {
        results.push({
            actualPrice: data[i].actualPrice,
            price: data2[i].price
        })
    }
})

console.log(results)

Answer 4

Check out the link below for further insights. Consider using Array.prototype.some() if you need to determine whether any element satisfies a specified condition.

Exploring array objects

Alternatively, you may find the following code snippet helpful:

let results = []
data1.forEach((item, index) => {
    if (data1[index].price !== data2[index].price) {
        results.push({
            actualPrice: data[i].actualPrice,
            price: data2[i].price
        })
    }
})

console.log(results)

Answer 5

Answer №3

Give this a try! The following code snippet will generate a fresh array of objects named modifiedObj, containing only the actualPrice and Price.

const data = [{id: 111, option: "ONE", actualPrice: 600, price: "650"}, {id: 112, option: "TWO", actualPrice: 700, price: "440"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

const modifiedObj = data.map(({actualPrice, price}) => ({actualPrice, price}))

The output will appear in this structure:

[{actualPrice: 600, price: "650"}, {actualPrice: 700, price: "440"}, {actualPrice: 800, price: "450"}, {actualPrice: 600, price: "450"}]

Answer 6

Give this a try! The following code snippet will generate a fresh array of objects named modifiedObj, containing only the actualPrice and Price.

const data = [{id: 111, option: "ONE", actualPrice: 600, price: "650"}, {id: 112, option: "TWO", actualPrice: 700, price: "440"}, {id: 113, option: "THREE", actualPrice: 800, price: "450"}, {id: 111, option: "ONE", actualPrice: 600, price: "450"}]

const modifiedObj = data.map(({actualPrice, price}) => ({actualPrice, price}))

The output will appear in this structure:

[{actualPrice: 600, price: "650"}, {actualPrice: 700, price: "440"}, {actualPrice: 800, price: "450"}, {actualPrice: 600, price: "450"}]

What is the best way to retrieve a specific property (such as key/value) from an array of objects using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

"Capturing" AJAX requests from Capybara / Selenium - Rails

What is the reason for the result of .splice being a singular object?

`Why my React function calls are not being tested properly with Jest and Sinon?`

An addition operation in Javascript

The pagination feature in DataTable does not retain the edited page after making changes

What is the best way to organize class usage within other classes to prevent circular dependencies?

Tips for styling a button upon being clicked

Learn the process of transmitting JSON data from a server-side (nodejs) to the client-side using Ajax

Tips for solving memory leaks in my vue.js / axios application?

"Customizing the gaps between cluster bars on AmCharts JS for a clean and professional

The Vue dragula plugin - drop event listener being triggered repeatedly

The JQuery loading symbol does not prevent keyboard interactions

Issues with Knockout functionality due to retrieval of values from an external JSON file

Use React to insert a leading zero next to a number in the input field if the number is greater than 10

My Angular project is experiencing issues with Socket.IO functionality

Troubles with modifying website background using JavaScript

Exploring directory organization in GraphQL Queries using GatsbyJS

Update the value of ng-show to false after redirection to the home page from the login page using AngularJS

The functionality of the Node.js/Express.js app is limited to operating solely on Port 3000

HTML element DIV positioned above the iframe