Retrieve both the key and value from an array of objects

Question

Retrieve both the key and value from an array of objects

I have been scouring the internet for a solution to this question, but I haven't come across anything that fits my needs.

Let's say we have an array of objects like this --

 "points":[{"pt":"Point-1","value":"Java, j2ee developer"},{"pt":"Point-2","value":"Experienced in Core Java, Spring, Hibernate, JPA, Big Data, SOA, BPEL"}]

From the array above, I am looking to extract both keys and values for a specific pair so that my result appears as follows --

 [{"value":"Java, j2ee developer"},{"value":"Experienced in Core Java, Spring, Hibernate, JPA, Big Data, SOA, BPEL"}]

I am aware that this can be achieved through manual looping. However, I am curious if there is a way to obtain the desired result in one go using lodash or another API without having to loop through the data. Is this possible?

javascript arrays json multidimensional-array

Answer 1

Answer №1

If you want to manipulate your array, you can use the map method:

var data = [
    { 'id': '1', 'name': 'John Doe' },
    { 'id': '2', 'name': 'Jane Smith' }
];

var modifiedData = data.map(function(item) {
    return { name: item.name };
});

Answer 2

If you want to manipulate your array, you can use the map method:

var data = [
    { 'id': '1', 'name': 'John Doe' },
    { 'id': '2', 'name': 'Jane Smith' }
];

var modifiedData = data.map(function(item) {
    return { name: item.name };
});

Answer 3

Answer №2

For those utilizing the most up-to-date version of Javascript, there is an additional technique you can employ when using map called destructuring. This method allows you to extract specific properties in a more refined and organized manner.

points.map(({ value }) => ({ value }));

In this scenario, the arrow function takes a point object as input and utilizes { value } for property destructuring, specifically extracting the point.value property into a variable named value.

Subsequently, it creates and returns a condensed object literal in which value serves as both the key and the value.

Upon compilation with Babel, the result will be:

points.map(function (_ref) {
  var value = _ref.value;
  return { value: value };
});

Answer 4

For those utilizing the most up-to-date version of Javascript, there is an additional technique you can employ when using map called destructuring. This method allows you to extract specific properties in a more refined and organized manner.

points.map(({ value }) => ({ value }));

In this scenario, the arrow function takes a point object as input and utilizes { value } for property destructuring, specifically extracting the point.value property into a variable named value.

Subsequently, it creates and returns a condensed object literal in which value serves as both the key and the value.

Upon compilation with Babel, the result will be:

points.map(function (_ref) {
  var value = _ref.value;
  return { value: value };
});

Retrieve both the key and value from an array of objects

Answer №1

Answer №2

Similar questions

Sharing information between React components involves passing data as props. By sending data from

Choosing items from a JSON array using 2 specific requirements

I'm encountering CORS issues while attempting to log in using guacamole from my React app. Can anyone advise on what might be causing this problem

Creating a variable in JavaScript

What is the best way to implement automatic scrolling to the bottom of a materialUI drawer in React after a page refresh?

Dependency management in ReactJS components

Collaborating on user authorization within a MEAN.JS framework

The Facebook SDK's function appears to be triggering twice

Echo command fails to work with location.href

Creating a time-limited personal link with Django Rest Framework and React

Accessing JavaScript cookie within .htaccess file to establish redirection parameters according to cookie content

Creating a new list by grouping elements from an existing list

Manipulate Input Classes by Adding and Removing Them

What is the reason behind localStorage.getItem consistently returning a string value?

Navigating through parent folder HTML files from child folder HTML files

Exploring the method of implementing a "template" with Vue 3 HeadlessUI TransitionRoot

Authenticate yourself as a user or an organization on mongodb

Guide to creating a delayed response that does not block in Node and Express

Tips for obtaining a binary file sent through an HTTP:POST request using angular.js

Having trouble with changing text in a link with an onclick event?