Retrieve specific attributes from each object in an array

Question

Retrieve specific attributes from each object in an array

I have an array of objects containing numerous properties. I am looking to create a new array that only includes specific key-value pairs:

const sampleArray = [
    { "key1": "value1", "key2": "value2", /* … */, "key100": "value100" },
    { "key1": "value1", "key2": "value2",  /* … */, "key100": "value100" },
    // …
  ];

What's the best way to filter, map, reduce, or use another method to extract the desired keys from the array?

const newArr = sampleArray.map(function(obj) { 
    delete obj.key1; 
    delete obj.key3;
    delete obj.key15;
    // Long list …

    return obj; 
  });

Is there a way to retain only key20, key30, key70, key80 for each object and remove all others?

javascript arrays ecmascript-6

Answer 1

Answer №1

Utilize object destructuring for extracting the properties and constructing a new object with shorthand property names:

const data = [{ "att20": "att20", "att30": "att30", "att70": "att70", "att80": "att80"}, { "att20": "att20", "att30": "att30", "att70": "att70", "att80": "att80"}];

const modifiedData = data.map(({ att20, att30, att70, att80 }) => ({
  att20,
  att30,
  att70,
  att80
}));

console.log(modifiedData);

Answer 2

Utilize object destructuring for extracting the properties and constructing a new object with shorthand property names:

const data = [{ "att20": "att20", "att30": "att30", "att70": "att70", "att80": "att80"}, { "att20": "att20", "att30": "att30", "att70": "att70", "att80": "att80"}];

const modifiedData = data.map(({ att20, att30, att70, att80 }) => ({
  att20,
  att30,
  att70,
  att80
}));

console.log(modifiedData);

Answer 3

Answer №2

When using the map function to create a new array, there is no need to delete any elements. Instead, you can simply create an array of interesting keys and return it.

var dummyArray = [{
  "att1": "something",
  "att2": "something",
  "att20": "something",
  "att100": "something"
}, {
  "att1": "something",
  "att2": "something",
  "att20": "something",

  "att100": "something"
}];

let x = dummyArray.map((item) => {
  return {
    attr20: item.att20
  }

})

console.log(x)

Answer 4

When using the map function to create a new array, there is no need to delete any elements. Instead, you can simply create an array of interesting keys and return it.

var dummyArray = [{
  "att1": "something",
  "att2": "something",
  "att20": "something",
  "att100": "something"
}, {
  "att1": "something",
  "att2": "something",
  "att20": "something",

  "att100": "something"
}];

let x = dummyArray.map((item) => {
  return {
    attr20: item.att20
  }

})

console.log(x)

Answer 5

Answer №3

Utilize an array to store the properties you wish to retain, and then iterate through each object to transfer the desired properties to a new object.

var data = [{ "name": "John", "age": 30, "city": "New York"}, { "name": "Emily", "age": 25, "city": "Los Angeles"}];

var propertiesToKeep = ["name", "city"];

var newData = data.map(item => {
  const newObj = {};
  for (const prop of propertiesToKeep) {
    newObj[prop] = item[prop];
  }
  return newObj;
})

console.log(newData)

Answer 6

Utilize an array to store the properties you wish to retain, and then iterate through each object to transfer the desired properties to a new object.

var data = [{ "name": "John", "age": 30, "city": "New York"}, { "name": "Emily", "age": 25, "city": "Los Angeles"}];

var propertiesToKeep = ["name", "city"];

var newData = data.map(item => {
  const newObj = {};
  for (const prop of propertiesToKeep) {
    newObj[prop] = item[prop];
  }
  return newObj;
})

console.log(newData)

Answer 7

Answer №4

I've discovered the simplest solution to this problem using JSON.stringify()

The JSON.stringify() function in JavaScript converts an object or value into a JSON string. It can also replace values with a specified replacer function, or include only certain properties with a replacer array.

    const data = [
      { "id": "0001", "type": "donut", "name": "Cake", "ppu": 0.55 },
      { "id": "0002", "type": "ansd", "name": "EARK", "ppu": 0.67 }
    ];
    const jsonData = JSON.stringify(data, ['id', 'type']);
    console.log(jsonData);

Answer 8

I've discovered the simplest solution to this problem using JSON.stringify()

The JSON.stringify() function in JavaScript converts an object or value into a JSON string. It can also replace values with a specified replacer function, or include only certain properties with a replacer array.

    const data = [
      { "id": "0001", "type": "donut", "name": "Cake", "ppu": 0.55 },
      { "id": "0002", "type": "ansd", "name": "EARK", "ppu": 0.67 }
    ];
    const jsonData = JSON.stringify(data, ['id', 'type']);
    console.log(jsonData);

Answer 9

Answer №5

Here is a useful function that extracts only the specified properties from an object, based on an array of desired properties passed as a parameter.

The advantage of using this function is that it provides a more direct and cleaner way to extract properties, especially when dealing with extracting properties from a single object.

If you have a list of objects, you can easily map through the list and perform property extraction in each iteration.

function objectExtract(obj, properties) {
    return properties.reduce((result, prop) => {
        if (obj.hasOwnProperty(prop)) {
            result[prop] = obj[prop];
        }
        return result;
    }, {});
}

You can learn more about reduce here.

Usage example:

(a real-world example involving Redux)

store.dispatch(
    setRooms({ 
        ...roomsState,
        list: rooms.reduce((list, room) => {
            list[room.id] = objectExtract(room, ['name', 'description', 'createdAt', 'updatedAt']);
            return list;
        }, {})
    })
)

(Based on the example provided in the question)

var dataSourceArray = [{
    "att1": "something",
    "att2": "something",
    "att20": "something",
    "att100": "something"
}, {
    "att1": "something",
    "att2": "something",
    "att20": "something",

    "att100": "something"
}];

let x = dataSourceArray.map((item) => {
    return objectExtrac(item, ['att100', 'att2']);
});

Answer 10

Here is a useful function that extracts only the specified properties from an object, based on an array of desired properties passed as a parameter.

The advantage of using this function is that it provides a more direct and cleaner way to extract properties, especially when dealing with extracting properties from a single object.

If you have a list of objects, you can easily map through the list and perform property extraction in each iteration.

function objectExtract(obj, properties) {
    return properties.reduce((result, prop) => {
        if (obj.hasOwnProperty(prop)) {
            result[prop] = obj[prop];
        }
        return result;
    }, {});
}

You can learn more about reduce here.

Usage example:

(a real-world example involving Redux)

store.dispatch(
    setRooms({ 
        ...roomsState,
        list: rooms.reduce((list, room) => {
            list[room.id] = objectExtract(room, ['name', 'description', 'createdAt', 'updatedAt']);
            return list;
        }, {})
    })
)

(Based on the example provided in the question)

var dataSourceArray = [{
    "att1": "something",
    "att2": "something",
    "att20": "something",
    "att100": "something"
}, {
    "att1": "something",
    "att2": "something",
    "att20": "something",

    "att100": "something"
}];

let x = dataSourceArray.map((item) => {
    return objectExtrac(item, ['att100', 'att2']);
});

Retrieve specific attributes from each object in an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Usage example:

Similar questions

What exactly does "nothing" mean in Node when using async await?

Transitionend event fails to trigger when Chrome tab is not in focus

Issue with Angular's ng-show failing to display an image post-processing

What is the best way to initiate an image loop with the click of a button?

How can I use HTML and Javascript to toggle the visibility of a 'select' element, like a dropdown menu

You can't scroll vertically to the top of the form within a specific height range

How can I use the draggable and droppable features to add <li> elements to a <ul> list?

Issue with Jquery toggle functionality only affecting a single div

Does JSON have a special reserved key for identifying the time?

Repurpose the identical popup window

"Endless loop error in Three.js causing a system crash

What is the best way to transform a data dictionary into an array in Swift programming language?

Displaying PHP output within a JavaScript expression

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

AngularJS - Smoothly navigate to the top of the page by swiping left or right

React throwing error: Context value is undefined

Issues with AngularJS directives properly binding attributes

Why does this switch case statement fail to effectively replace the elements of the text in order to unravel this JavaScript problem?

Attempting to postpone the execution by using setTimeout() within a loop

Is it time to ditch Internet Explorer for EDGE?