What is the method to convert a single object into an array of multiple objects?

Question

What is the method to convert a single object into an array of multiple objects?

Is there a way to convert this into an array of objects that are ordered based on another array's keys?

{
  tom: 11,
  jim: 22,
  jay: 13
}

Here are some input -> output examples:

['jim', 'tom', 'kim', 'jay'] ->

[{jim: 22}, {tom: 11}, {jay: 13}]

['may', 'jay', 'tom', 'jim'] ->

[{jay: 13}, {tom: 11}, {jim: 22}]

I am looking for a solution, preferably using a one-liner in lodash. How can I achieve this transformation?

javascript arrays sorting object lodash

Answer 1

Answer №1

Here is a JavaScript function that can help you achieve your desired outcome.

function filterValues(sourceObj, keys) {
    let filteredValues = [];

    // Check for valid inputs
    if (!sourceObj || !keys) { return filteredValues; }

    for (let i = 0; i < keys.length; i++) {
        if (!sourceObj.hasOwnProperty(keys[i])) { continue; }     
        let item = {};
        item[keys[i]] = sourceObj[keys[i]];
        filteredValues.push(item);
    }

    return filteredValues;   
}

Testing the Function:

let testObject = { john: 25, sarah: 30, emma: 22 };
let testKeys1 = ['sarah', 'john', 'david', 'emma'];
let testKeys2 = ['lucy', 'emma', 'john', 'sarah'];

let result1 = filterValues(testObject, testKeys1);
console.log(JSON.stringify(result1));

let result2 = filterValues(testObject, testKeys2);
console.log(JSON.stringify(result2));

View on JSFiddle

Answer 2

Here is a JavaScript function that can help you achieve your desired outcome.

function filterValues(sourceObj, keys) {
    let filteredValues = [];

    // Check for valid inputs
    if (!sourceObj || !keys) { return filteredValues; }

    for (let i = 0; i < keys.length; i++) {
        if (!sourceObj.hasOwnProperty(keys[i])) { continue; }     
        let item = {};
        item[keys[i]] = sourceObj[keys[i]];
        filteredValues.push(item);
    }

    return filteredValues;   
}

Testing the Function:

let testObject = { john: 25, sarah: 30, emma: 22 };
let testKeys1 = ['sarah', 'john', 'david', 'emma'];
let testKeys2 = ['lucy', 'emma', 'john', 'sarah'];

let result1 = filterValues(testObject, testKeys1);
console.log(JSON.stringify(result1));

let result2 = filterValues(testObject, testKeys2);
console.log(JSON.stringify(result2));

View on JSFiddle

Answer 3

Answer №2

In the case that the object is referred to as obj and the list of keys to search for is named keys:

_.zip([keys, keys.map(x => obj[x])]).filter(([k, v]) => v).map(x => _.fromPairs([x]))

Alternatively, if order does not matter, there is another approach:

_.toPairs(obj).filter(([k, v]) => _.include(keys, k)).map(x => _.fromPairs([x]))

Answer 4

In the case that the object is referred to as obj and the list of keys to search for is named keys:

_.zip([keys, keys.map(x => obj[x])]).filter(([k, v]) => v).map(x => _.fromPairs([x]))

Alternatively, if order does not matter, there is another approach:

_.toPairs(obj).filter(([k, v]) => _.include(keys, k)).map(x => _.fromPairs([x]))

Answer 5

Answer №3

To convert the object into an array of key-value pairs using lodash, you can utilize the lodash#toPairs method. Then, wrap each pair with another array by using lodash#chunk. Finally, map each item to form the pairs into an object using lodash#map and iterate through them using lodash#fromPairs.

var result = _(data).toPairs().chunk().map(_.fromPairs).value();

var data = {
  tom: 11,
  jim: 22,
  jay: 13
};

var result = _(data).toPairs().chunk().map(_.fromPairs).value();
  
console.log(result);

.as-console-wrapper{min-height:100%;top:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

An alternative Vanilla JS ES6 solution involves using Object#keys to extract an array of keys from the object. Then, use Array#map to associate each key with its corresponding value in a new object.

var result = Object.keys(data).map(key => ({ [key]: data[key] }));

var data = {
  tom: 11,
  jim: 22,
  jay: 13
};

var result = Object.keys(data).map(key => ({ [key]: data[key] }));
  
console.log(result);

.as-console-wrapper{min-height:100%;top:0}

If your browser doesn't support ES6 features, you can use the following modified version:

var result = Object.keys(data).map(function(key) {
  var obj = {};
  obj[key] = data[key];
  return obj;
});

var data = {
  tom: 11,
  jim: 22,
  jay: 13
};

var result = Object.keys(data).map(function(key) {
  var obj = {};
  obj[key] = data[key];
  return obj;
});
  
console.log(result);

.as-console-wrapper{min-height:100%;top:0}

Answer 6

To convert the object into an array of key-value pairs using lodash, you can utilize the lodash#toPairs method. Then, wrap each pair with another array by using lodash#chunk. Finally, map each item to form the pairs into an object using lodash#map and iterate through them using lodash#fromPairs.

var result = _(data).toPairs().chunk().map(_.fromPairs).value();

var data = {
  tom: 11,
  jim: 22,
  jay: 13
};

var result = _(data).toPairs().chunk().map(_.fromPairs).value();
  
console.log(result);

.as-console-wrapper{min-height:100%;top:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

An alternative Vanilla JS ES6 solution involves using Object#keys to extract an array of keys from the object. Then, use Array#map to associate each key with its corresponding value in a new object.

var result = Object.keys(data).map(key => ({ [key]: data[key] }));

var data = {
  tom: 11,
  jim: 22,
  jay: 13
};

var result = Object.keys(data).map(key => ({ [key]: data[key] }));
  
console.log(result);

.as-console-wrapper{min-height:100%;top:0}

If your browser doesn't support ES6 features, you can use the following modified version:

var result = Object.keys(data).map(function(key) {
  var obj = {};
  obj[key] = data[key];
  return obj;
});

var data = {
  tom: 11,
  jim: 22,
  jay: 13
};

var result = Object.keys(data).map(function(key) {
  var obj = {};
  obj[key] = data[key];
  return obj;
});
  
console.log(result);

.as-console-wrapper{min-height:100%;top:0}

Answer 7

Answer №4

For a quick one-liner solution to this problem, you can achieve it without relying on lodash. All you need are simple filter and map functions. However, if you prefer, you can also utilize lodash.

// Here is your source object 
var keys = {
  tom: 11,
  jim: 22,
  jay: 13
}

Let's assume you have two arrays:

var input1 = ['jim', 'tom', 'kim', 'jay'];
var input2 = ['may', 'jay', 'tom', 'jim'];

Now, for the solutions:

// For the first input
input1.filter(s => keys[s]).map(s => ({[s]: keys[s]}));
// For the second input
input2.filter(s => keys[s]).map(s => ({[s]: keys[s]}));

Below is a working snippet for you:

var keys = {
  tom: 11,
  jim: 22,
  jay: 13
}

var input1 = ['jim', 'tom', 'kim', 'jay'];
var input2 = ['may', 'jay', 'tom', 'jim'];

var output1 = input1.filter(s => keys[s]).map(s => ({[s]: keys[s]}));
var output2 = input2.filter(s => keys[s]).map(s => ({[s]: keys[s]}));

console.log("Output1: ", JSON.stringify(output1));
console.log("Output2: ", JSON.stringify(output2));

Answer 8

For a quick one-liner solution to this problem, you can achieve it without relying on lodash. All you need are simple filter and map functions. However, if you prefer, you can also utilize lodash.

// Here is your source object 
var keys = {
  tom: 11,
  jim: 22,
  jay: 13
}

Let's assume you have two arrays:

var input1 = ['jim', 'tom', 'kim', 'jay'];
var input2 = ['may', 'jay', 'tom', 'jim'];

Now, for the solutions:

// For the first input
input1.filter(s => keys[s]).map(s => ({[s]: keys[s]}));
// For the second input
input2.filter(s => keys[s]).map(s => ({[s]: keys[s]}));

Below is a working snippet for you:

var keys = {
  tom: 11,
  jim: 22,
  jay: 13
}

var input1 = ['jim', 'tom', 'kim', 'jay'];
var input2 = ['may', 'jay', 'tom', 'jim'];

var output1 = input1.filter(s => keys[s]).map(s => ({[s]: keys[s]}));
var output2 = input2.filter(s => keys[s]).map(s => ({[s]: keys[s]}));

console.log("Output1: ", JSON.stringify(output1));
console.log("Output2: ", JSON.stringify(output2));

What is the method to convert a single object into an array of multiple objects?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to switch the linter in grunt.js to jslint instead?

Issue with Chart JS: Firefox is reporting that the 'Chart' is not defined

How can the executable path for Firefox be specified in Nightwatch?

Discord bot that combines the power of discord.js and node.js to enhance your music

Steps to display a full-page loader/spinner prior to the completion of loading a React application

What is the best way to create a "check all" feature in React using child components?

Email replay feature

Deployment to Amazon Amplify encounters failure when using Next JS

Observing model property changes in Swift with didSet isn't working as expected

"Exploring the world of arrays and looping in

Having trouble resolving errors encountered while running the `npm run build` command, not sure of the steps to rectify

How can you sustain a backend connection using NodeJS as users navigate through different pages?

Transforming a JSON object into an array with the help of lodash

What is the best way to select an element with a dynamic ID in jQuery?

Issue found in factory and service dependencies

In Swift, search through an array to check if the values of a specific parameter exceed 2000

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Invoking the .html(result) function multiple times within the AJAX success callback

Embed a script into an iframe from a separate domain

Converting JavaScript code from Jade into EJS framework