Related
I have two arrays: newParamArr and paramVal.
Example values in the newParamArr array: [ "Name", "Age", "Email" ].
Example values in the paramVal array: [ "Jon", 15, "jon#gmail.com" ].
I need to create a JavaScript object that places all of the items in the array in the same object. For example { [newParamArr[0]]: paramVal[0], [newParamArr[1]]: paramVal[1], ... }.
In this case, the result should be { Name: "Jon", "Age": 15, "Email": "jon#gmail.com" }.
The lengths of the two arrays are always the same, but the length of arrays can increase or decrease. That means newParamArr.length === paramVal.length will always hold.
None of the below posts could help to answer my question:
Javascript Recursion for creating a JSON object
Recursively looping through an object to build a property list
var keys = ['foo', 'bar', 'baz'];
var values = [11, 22, 33]
var result = {};
keys.forEach((key, i) => result[key] = values[i]);
console.log(result);
Alternatively, you can use Object.assign
result = Object.assign(...keys.map((k, i) => ({[k]: values[i]})))
or the object spread syntax (ES2018):
result = keys.reduce((o, k, i) => ({...o, [k]: values[i]}), {})
or Object.fromEntries (ES2019):
Object.fromEntries(keys.map((_, i) => [keys[i], values[i]]))
In case you're using lodash, there's _.zipObject exactly for this type of thing.
Using ECMAScript2015:
const obj = newParamArr.reduce((obj, value, index) => {
obj[value] = paramArr[index];
return obj;
}, {});
(EDIT) Previously misunderstood the OP to want an array:
const arr = newParamArr.map((value, index) => ({[value]: paramArr[index]}))
I needed this in a few places so I made this function...
function zip(arr1,arr2,out={}){
arr1.map( (val,idx)=>{ out[val] = arr2[idx]; } );
return out;
}
console.log( zip( ["a","b","c"], [1,2,3] ) );
> {'a': 1, 'b': 2, 'c': 3}
I know that the question is already a year old, but here is a one-line solution:
Object.assign( ...newParamArr.map( (v, i) => ( {[v]: paramVal[i]} ) ) );
The following worked for me.
//test arrays
var newParamArr = [1, 2, 3, 4, 5];
var paramVal = ["one", "two", "three", "four", "five"];
//create an empty object to ensure it's the right type.
var obj = {};
//loop through the arrays using the first one's length since they're the same length
for(var i = 0; i < newParamArr.length; i++)
{
//set the keys and values
//avoid dot notation for the key in this case
//use square brackets to set the key to the value of the array element
obj[newParamArr[i]] = paramVal[i];
}
console.log(obj);
You can use Object.assign.apply() to merge an array of {key:value} pairs into the object you want to create:
Object.assign.apply({}, keys.map( (v, i) => ( {[v]: values[i]} ) ) )
A runnable snippet:
var keys = ['foo', 'bar', 'baz'];
var values = [11, 22, 33]
var result = Object.assign.apply({}, keys.map( (v, i) => ( {[v]: values[i]} ) ) );
console.log(result); //returns {"foo": 11, "bar": 22, "baz": 33}
See the documentation for more
Object.fromEntries takes an array of key, value tuples and return the zipped result as object, you can then use it as follow:
const keys = ["a","b","c"];
const values = [1,2,3];
Object.fromEntries(keys.map((key, index)=> [key, values[index]])); // {a: 1, b: 2, c: 3}
Use a loop:
var result = {};
for (var i = 0; i < newParamArr.length; i++) {
result[newParamArr[i]] = paramArr[i];
}
This one works for me.
var keys = ['foo', 'bar', 'baz'];
var values = [11, 22, 33]
var result = {};
keys.forEach(function(key, i){result[key] = values[i]});
console.log(result);
I have two arrays: newParamArr and paramVal.
Example values in the newParamArr array: [ "Name", "Age", "Email" ].
Example values in the paramVal array: [ "Jon", 15, "jon#gmail.com" ].
I need to create a JavaScript object that places all of the items in the array in the same object. For example { [newParamArr[0]]: paramVal[0], [newParamArr[1]]: paramVal[1], ... }.
In this case, the result should be { Name: "Jon", "Age": 15, "Email": "jon#gmail.com" }.
The lengths of the two arrays are always the same, but the length of arrays can increase or decrease. That means newParamArr.length === paramVal.length will always hold.
None of the below posts could help to answer my question:
Javascript Recursion for creating a JSON object
Recursively looping through an object to build a property list
var keys = ['foo', 'bar', 'baz'];
var values = [11, 22, 33]
var result = {};
keys.forEach((key, i) => result[key] = values[i]);
console.log(result);
Alternatively, you can use Object.assign
result = Object.assign(...keys.map((k, i) => ({[k]: values[i]})))
or the object spread syntax (ES2018):
result = keys.reduce((o, k, i) => ({...o, [k]: values[i]}), {})
or Object.fromEntries (ES2019):
Object.fromEntries(keys.map((_, i) => [keys[i], values[i]]))
In case you're using lodash, there's _.zipObject exactly for this type of thing.
Using ECMAScript2015:
const obj = newParamArr.reduce((obj, value, index) => {
obj[value] = paramArr[index];
return obj;
}, {});
(EDIT) Previously misunderstood the OP to want an array:
const arr = newParamArr.map((value, index) => ({[value]: paramArr[index]}))
I needed this in a few places so I made this function...
function zip(arr1,arr2,out={}){
arr1.map( (val,idx)=>{ out[val] = arr2[idx]; } );
return out;
}
console.log( zip( ["a","b","c"], [1,2,3] ) );
> {'a': 1, 'b': 2, 'c': 3}
I know that the question is already a year old, but here is a one-line solution:
Object.assign( ...newParamArr.map( (v, i) => ( {[v]: paramVal[i]} ) ) );
The following worked for me.
//test arrays
var newParamArr = [1, 2, 3, 4, 5];
var paramVal = ["one", "two", "three", "four", "five"];
//create an empty object to ensure it's the right type.
var obj = {};
//loop through the arrays using the first one's length since they're the same length
for(var i = 0; i < newParamArr.length; i++)
{
//set the keys and values
//avoid dot notation for the key in this case
//use square brackets to set the key to the value of the array element
obj[newParamArr[i]] = paramVal[i];
}
console.log(obj);
You can use Object.assign.apply() to merge an array of {key:value} pairs into the object you want to create:
Object.assign.apply({}, keys.map( (v, i) => ( {[v]: values[i]} ) ) )
A runnable snippet:
var keys = ['foo', 'bar', 'baz'];
var values = [11, 22, 33]
var result = Object.assign.apply({}, keys.map( (v, i) => ( {[v]: values[i]} ) ) );
console.log(result); //returns {"foo": 11, "bar": 22, "baz": 33}
See the documentation for more
Object.fromEntries takes an array of key, value tuples and return the zipped result as object, you can then use it as follow:
const keys = ["a","b","c"];
const values = [1,2,3];
Object.fromEntries(keys.map((key, index)=> [key, values[index]])); // {a: 1, b: 2, c: 3}
Use a loop:
var result = {};
for (var i = 0; i < newParamArr.length; i++) {
result[newParamArr[i]] = paramArr[i];
}
This one works for me.
var keys = ['foo', 'bar', 'baz'];
var values = [11, 22, 33]
var result = {};
keys.forEach(function(key, i){result[key] = values[i]});
console.log(result);
var arr1 = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
Let's assume that I want to create a list like
1 a
2 b
3 c
4 d
5 e
by using template literal.
let x;
x = document.createElement('li');
x.innerHTML += `<span>${<arr1 index>}</span> <span>${<arr2 index>}</span>`
How can I do that ? Can we use forEach for two arrays in same time ?
This would be more like flatten(zip(arr1, arr2)). There is no built-in zip though you can very easily make it and you can see Array.flat here: MDN: Array.flat.
const arr1 = [1, 2, 3, 4, 5];
const arr2 = ["a", "b", "c", "d", "e"];
const flatten = arr => arr.flat();
const zip = (a, b) => a.map((e, idx) => [e, b[idx]]);
const arr3 = flatten(zip(arr1, arr2));
console.log(arr3);
The answer is "kind of." What you can do is loop through one array with a forEach method, and use the optional argument index to get the value of the second array as well. Something like this:
var arr1 = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
arr1.forEach((value, index) => {
console.log(value);
console.log(arr2[index])
})
But if the data in the two arrays are at all related, you'd want to put the data in the same object, like this:
var arr = [
{
num: 1,
letter: "a"
},
{
num: 2,
letter: "b"
},
{
num: 3,
letter: "c"
}
];
arr.forEach(value => {
console.log(value.num);
console.log(value.letter);
})
Or you would want to use a regular for loop
You could simply use a for() loop instead:
const max = Math.max(arrA.length, arrB.length)
for (let i = 0; i < max; i++) {
const objA = arrA[i],
objB = arrB[i]
if ('undefined' !== typeof objA) {
console.log({ objA })
}
if ('undefined' !== typeof objB) {
console.log({ objB })
}
}
There is no real magic here. You use an index variable, and let it increment:
var arr1 = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
let ul = document.querySelector("ul");
for (let i = 0; i < arr1.length; i++) {
let li = document.createElement('li');
for (let val of [arr1[i], arr2[i]]) {
let span = document.createElement('span');
span.textContent = val;
li.appendChild(span);
}
ul.appendChild(li);
}
<ul></ul>
There are of course other ways to loop, like with forEach, but it comes down to the same principle.
BTW, don't use string literals (template literals) for combining HTML with content, as you might have < or & characters in the content, which really should be escaped. In some cases, not escaping those may lead to unexpected side effects. By creating the elements with createElement and assigning content to their textContent or innerText properties, you avoid those potential issues. Some libraries make it possible to do this with less code, in a more functional way.
As to the initial data: in object oriented languages, like JavaScript, it is better practice to put related values together in one object. In the example, 1 and "a" apparently have a connection, so -- if possible -- you should define the initial data structure as something like this:
var data = [
{ value: 1, name: "a" },
{ value: 2, name: "b" },
{ value: 3, name: "c" },
{ value: 4, name: "d" },
{ value: 5, name: "e" }
];
I have the following JavaScript object -
var newArray = { "set1": [], "set2": [] };
I am trying to push new data in this like -
newArray.set1.push(newSet1);
newArray.set2.push(newSet2);
Where newSet1 and newSet2 is equal to -
[{"test1","test1"},{"test2","test2"}] & [{"test3","test3"},{"test4","test4"}]
However when this is getting pushed in it is creating additional square brackets with the end result looking like -
{ "set1": [[{"test1","test1"},{"test2","test2"}]], "set2": [[{"test3","test3"},{"test4","test4"}]] }
When I actually need -
{ "set1": [{"test1","test1"},{"test2","test2"}], "set2": [{"test3","test3"},{"test4","test4"}] }
I tried setting my newArray as blank like -
var newArray = { "set1": '', "set2": '' };
However this did not work. How can I adjust it to accept the sets without adding additional brackets?
Use .concat()
var newArray = { "set1": [], "set2": [] };
newArray.set1 = newArray.set1.concat(newSet1);
newArray.set2 = newArray.set2.concat(newSet2);
You should say
newArray.set1.push(newSet1[0]);
newArray.set1.push(newSet1[1]);
newArray.set2.push(newSet2[0]);
newArray.set2.push(newSet2[1]);
newArray.set1 = newSet1;
newArray.set2 = newSet2;
Use Like
var newArray = { "set1": [], "set2": [] };
var arr1 = new Array ("A", "B", "C");
var arr2 = new Array (1, 2, 3);
var multiArr = new Array (arr1, arr2);
// or
var multiArr = [arr1, arr2];
// or
var multiArr = [["A", "B", "C"], [1, 2, 3]];
// you can access the elements of the array by zero-based indices
var firstRow = multiArr[0]; // same as arr1
var secondRowFirstCell = multiArr[1][0]; // 1
newArray.set1.push(multiArr[0]); //so, you need to use this with
newArray.set1.push(multiArr[1]); //so, you need to use this with
console.log(newArray);
DEMO
I have an array with a list of objects. I want to split this array at one particular index, say 4 (this in real is a variable). I want to store the second part of the split array into another array. Might be simple, but I am unable to think of a nice way to do this.
Use slice, as such:
var ar = [1,2,3,4,5,6];
var p1 = ar.slice(0,4);
var p2 = ar.slice(4);
You can use Array#splice to chop all elements after a specified index off the end of the array and return them:
x = ["a", "b", "c", "d", "e", "f", "g"];
y = x.splice(3);
console.log(x); // ["a", "b", "c"]
console.log(y); // ["d", "e", "f", "g"]
use slice:
var bigOne = [0,1,2,3,4,5,6];
var splittedOne = bigOne.slice(3 /*your Index*/);
I would recommend to use slice() like below
ar.slice(startIndex,length);
or
ar.slice(startIndex);
var ar = ["a","b","c","d","e","f","g"];
var p1 = ar.slice(0,3);
var p2 = ar.slice(3);
console.log(p1);
console.log(p2);
const splitAt = (i, arr) => {
const clonedArray = [...arr];
return [clonedArray.splice(0, i), clonedArray];
}
const [left, right] = splitAt(1, [1,2,3,4])
console.log(left) // [1]
console.log(right) // [2,3,4]
const [left1, right1] = splitAt(-1, [1,2,3,4])
console.log(left1) // []
console.log(right1) // [1,2,3,4]
const [left2, right2] = splitAt(5, [1,2,3,4])
console.log(left1) // [1,2,3,4]
console.log(right1) // []
Some benefits compared to other solutions:
You can get the result with a one liner
When split index is underflow or overflow, the result is still correct. slice will not behave correctly.
It does not mutate the original array. Some splice based solutions did.
There is only 1 splice operation, rather than 2 slice operations. But you need to benchmark to see if there is actual performance difference.
You can also use underscore/lodash wrapper:
var ar = [1,2,3,4,5,6];
var p1 = _.first(ar, 4);
var p2 = _.rest(ar, 4);
Simple one function from lodash:
const mainArr = [1,2,3,4,5,6,7]
const [arr1, arr2] = _.chunk(mainArr, _.round(mainArr.length / 2));
const splitArrayByIndex = (arr, index) => {
if (index > 0 && index < arr.length) {
return [arr.slice(0, index), arr.slice(-1 * (arr.length - index))]
}
}
const input = ['a', 'x', 'c', 'r']
const output = splitArrayByIndex(input, 2)
console.log({ input, output })