Building an array by combining elements from two separate arrays

Question

Building an array by combining elements from two separate arrays

I have a collection of objects, each object containing different names.

[ "John", "Alice", "Bob", "Eve" ]

There is also another array of objects:

[ { name:"Alice", value: 345 }, { name: "John", value: 678 }, { name: "Eve", value: 987 } ]

To create a new array, I want each element to be a sub-array with the name and value pairs. The order of elements should match the first array of names.

For example:

[ ["John", 678], ["Alice", 345], ["Bob", undefined], ["Eve", 987] ]

However, when I tried to implement this, my output was incorrect as the values were not in the correct order.

var order = ["John", "Alice", "Bob", "Eve"];
var values = [{ name: "Alice", value: 345 }, { name: "John", value: 678 }, { name: "Eve", value: 987 }];

var newArray = order.map(function(name, i) {
  return [name, (values[i] && values[i].value)];
})

console.log(newArray)

javascript arrays object

Answer 1

Answer №1

If you want to retrieve items in a specific order, consider using a Map.

var names = [ "Foo", "Bar", "Test", "Other" ],
    objects = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }],
    map = new Map(objects.map(({ name, value }) => [name, value])),
    result = names.map(name => [name, map.get(name)])

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you want to retrieve items in a specific order, consider using a Map.

var names = [ "Foo", "Bar", "Test", "Other" ],
    objects = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }],
    map = new Map(objects.map(({ name, value }) => [name, value])),
    result = names.map(name => [name, map.get(name)])

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

You're getting closer to the solution - all that's left is to discover the right value:

var order = ["Foo", "Bar", "Test", "Other"];
var values = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }];

var array = order.map(function(name, i) {
  return [name, values.some(e => e.name == name) ? values.find(e => e.name == name).value : undefined];
})

console.log(array)

Utilizing ES5 syntax:

var order = ["Foo", "Bar", "Test", "Other"];
var values = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }];

var array = order.map(function(name, i) {
  return [name, values.some(function(e) { 
    return e.name == name;
  }) ? values.find(function(e) {
    return e.name == name;
  }).value : undefined];
});

console.log(array)

Answer 4

You're getting closer to the solution - all that's left is to discover the right value:

var order = ["Foo", "Bar", "Test", "Other"];
var values = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }];

var array = order.map(function(name, i) {
  return [name, values.some(e => e.name == name) ? values.find(e => e.name == name).value : undefined];
})

console.log(array)

Utilizing ES5 syntax:

var order = ["Foo", "Bar", "Test", "Other"];
var values = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }];

var array = order.map(function(name, i) {
  return [name, values.some(function(e) { 
    return e.name == name;
  }) ? values.find(function(e) {
    return e.name == name;
  }).value : undefined];
});

console.log(array)

Answer 5

Answer №3

Take a look at my solution below. I hope you find it helpful.

const arrayA = [ "Apple", "Orange", "Banana", "Grapes" ];
const arrayB = [ { name:"Orange", value: 200 }, { name: "Apple", value: 150 }, { name: "Grapes", value: 500 } ];

const result = arrayA.map((item) => [ item, (arrayB.find(({ name }) => name === item) || {}).value ])

console.log(result)

Answer 6

Take a look at my solution below. I hope you find it helpful.

const arrayA = [ "Apple", "Orange", "Banana", "Grapes" ];
const arrayB = [ { name:"Orange", value: 200 }, { name: "Apple", value: 150 }, { name: "Grapes", value: 500 } ];

const result = arrayA.map((item) => [ item, (arrayB.find(({ name }) => name === item) || {}).value ])

console.log(result)

Answer 7

Answer №4

To retrieve the corresponding "name" in the "values" array, you must utilize the entries specified in the "order" array.

var order = ["Foo", "Bar", "Test", "Other"];
var values = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }];

var newArray = order.map(function(key, i) {
  let foundItem = values.find(({name}) => name === key);
  return [key, foundItem && foundItem.value ];
})

console.log(newArray)

Answer 8

To retrieve the corresponding "name" in the "values" array, you must utilize the entries specified in the "order" array.

var order = ["Foo", "Bar", "Test", "Other"];
var values = [{ name: "Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 }];

var newArray = order.map(function(key, i) {
  let foundItem = values.find(({name}) => name === key);
  return [key, foundItem && foundItem.value ];
})

console.log(newArray)

Answer 9

Answer №5

To extract values from a found item, you can utilize the map function along with Object.values. Alternatively, you may provide a default value if the item is not found.

const arr1 = [ "Foo", "Bar", "Test", "Other" ];

const arr2 = [ { name:"Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 } ];

const res = arr1.map(e => Object.values(arr2.find(({name}) => name === e) || ({name: e, value: undefined})));
console.log(res);

Answer 10

To extract values from a found item, you can utilize the map function along with Object.values. Alternatively, you may provide a default value if the item is not found.

const arr1 = [ "Foo", "Bar", "Test", "Other" ];

const arr2 = [ { name:"Bar", value: 159 }, { name: "Foo", value: 120 }, { name: "Other", value: 1230 } ];

const res = arr1.map(e => Object.values(arr2.find(({name}) => name === e) || ({name: e, value: undefined})));
console.log(res);

Answer 11

Answer №6

const items = ["Apple", "Banana", "Pear", "Orange"];
const prices = [{ category: "Banana", cost: 2.5 }, { category: "Apple", cost: 3.0 }, { category: "Orange", cost: 1.5 }];
const summary = [];
items.forEach((item) => {
let found = false;

prices.forEach(price => {
    if (item === price.category) {
summary.push([item, price.cost]);
        found = true;
}
});
if (!found) {
    summary.push([item, undefined]);
}
});

Answer 12

const items = ["Apple", "Banana", "Pear", "Orange"];
const prices = [{ category: "Banana", cost: 2.5 }, { category: "Apple", cost: 3.0 }, { category: "Orange", cost: 1.5 }];
const summary = [];
items.forEach((item) => {
let found = false;

prices.forEach(price => {
    if (item === price.category) {
summary.push([item, price.cost]);
        found = true;
}
});
if (!found) {
    summary.push([item, undefined]);
}
});

Building an array by combining elements from two separate arrays

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Manipulating Arrays

Performing an additional GET request using AngularJS

Extracting the name of a track from the /r/listenToThis subreddit for an IFTTT automation script

The browser automatically adds a backslash escape character to a JavaScript object

AJAX and JSON-powered PHP form validation

Navigating shadow dom elements in HTML with Selenium WebDriver

Is there a way I can turn off the dragging functionality in my situation?

Building a loading bar using dots

mongodb cannot locate the schema method within the nested container

Merging several arrays into a single multidimensional associative array with PHP

I am encountering an issue in Nextjs with mongoose where it seems that the function mongoose.model() is not

How can the sum of elements in an Array be shown as an output? [Java]

Create and store custom variables in tinyMCE.init for future reference

Execute a JavaScript transition upon clicking following the display block

Restrict HTML Elements Based on Their Size

Challenges arise when trying to maintain a div aligned to the far right of the browser window as the dimensions of the browser change, especially after applying an

My current assignment involves creating a recursive function that will output the numbers from an array that correspond to prime index values

How to align a div in the center of a cell with Bootstrap

Explore the data visualization capabilities of Angular Elements

Utilize Web3.js to interact with a specific function in a deployed smart contract on the Ethereum blockchain from a React application