We Keep Coding

Perform .join on a complex object with array of object dynamically

I have a complex js object, that contains arrays of an object. The problem is some of the main object properties' arrays can have a different property.
var foo = {};
foo.prop1 = [
{name:"test", skill:1},
{name:"test2", skill:2},
];
foo.prop2 = [
{address:"Earth",distance:1},
{address:"Mars", distance:2}
]
My aim is to just replace the main object property value with the joined values for retrieval.
This is what I have right now.
if(Object.keys(foo).length){
Object.keys(foo).forEach(key => {
var x = foo[key];
if(key === "address") {
foo[key] = x.map(function(elem){return elem.address;}).join(";");
} else {
foo[key] = x.map(function(elem){return elem.name;}).join(";");
}
});
}
How can I make it dynamic so that I don't need to use the if statement? I just want to join all the first property of the inner obj.
Result:
foo new values would be:
foo.prop1 = test;test2
foo.prop2 = Earth;Mars
I got it. I just want to join the first property of the sub object.
I replaced the if with this
foo[key] = x.map(function(elem){return elem[Object.keys(elem)[0]]; }).join(";");

I guess you are trying to choose the value with string type
var foo = {};
foo.prop1 = [{
name: "test",
skill: 1
},
{
name: "test2",
skill: 2
},
];
foo.prop2 = [{
address: "Earth",
distance: 1
},
{
address: "Mars",
distance: 2
}
]
function formulate() {
const result = {};
(Object.keys(foo) || []).forEach(function(k) {
result[k] = foo[k].map(function(val) {
str_key = Object.keys(val).filter(function(val_k) {
return typeof val[val_k] === "string";
});
return str_key.map(function(s) {
return val[s];
});
}).join(";");
});
return result;
}
result = formulate()
console.log(result);

I hope, this will work for you
var foo = {};
foo.prop1 = [
{name:"test", skill:1},
{name:"test2", skill:2},
];
foo.prop2 = [
{address:"Earth",distance:1},
{address:"Mars", distance:2}
]
Object.keys(foo).forEach(key => {
foo[key]=foo[key].map(val => { return Object.entries(val)[0][1] } ).toString().split(",").join(";")
});
console.log(foo)

Setting a deep JS object key using a lookup string

How do I set deep properties in a JavaScript object using a dot-syntax string to specify which property I want to change?
For simple objects, I could just use data['property_name'] = 'foo', but I don't necessarily know how deeply nested the data is going to be.
Below is some example code with how I'd like to be able to format the data in the end. For all I know there's a nice way that JS already allows you to do this, but I haven't been able to find it yet.
Plunker here.
var items = [
{
lookup_string: "User.UserProfile.name",
value: "John Smith"
},
{
lookup_string: "User.email",
value: "johnsmith#example.com"
},
]
var data = {};
items.forEach(function(item){
// Inside this loop, set the appropriate keys under data. Is there a non-convoluted way to do this?
});
console.log("items", items);
console.log("Results", data)
// In the end, data should look like this:
var desiredData = {
User: {
UserProfile: {
name: 'John Smith'
},
email: 'johnsmith#example.com'
}
}

You could split the lookup_string and reduce an object with a default object. Later assign the value.
function setValue(object, path, value) {
var keys = path.split('.'),
last = keys.pop();
keys.reduce(function (o, k) {
return o[k] = o[k] || {};
}, object)[last] = value;
}
var items = [{ lookup_string: "User.UserProfile.name", value: "John Smith" }, { lookup_string: "User.email", value: "johnsmith#example.com" }],
object = {};
items.forEach(function(o) {
setValue(object, o.lookup_string, o.value);
});
console.log(object);
.as-console-wrapper { max-height: 100% !important; top: 0; }

you will have to loop over all the keys from lookup_string.split('.') and assign values, something like this:
var items = [
{
lookup_string: "User.UserProfile.name",
value: "John Smith"
},
{
lookup_string: "User.email",
value: "johnsmith#example.com"
},
];
var data = {};
items.forEach(function(item){
var lookup = item.lookup_string.split('.');
var lastKey;
lookup.map(function(key){
data[key] = {};
lastKey = key;
});
data[lastKey] = item.value;
});
console.log("items", items);
console.log("Results", data)
// In the end, data should look like this:
var desiredData = {
User: {
UserProfile: {
name: 'John Smith'
},
email: 'johnsmith#example.com'
}
};

Javascript convert object with array string keys to key/name value's

I have an object with named keys like this
{
'name[first]': 'john',
'name[last]': 'doe'
}
that I want to convert to:
{
'name' : {
'first' : 'john',
'last' : 'doe'
}
}
Any idea on an elegent way to do this?

You can use reduce() to return obj and regular expression to split key.
var obj = {
'name[first]': 'john',
'name[last]': 'doe'
}
var result = Object.keys(obj).reduce(function(r, e) {
var key = e.split(/\[(.*?)\]/)
if (!r[key[0]]) r[key[0]] = {}
r[key[0]][key[1]] = obj[e]
return r;
}, {})
console.log(result)
For nested key structure you could again use reduce but with different approach to keys but then you face problem of deep merge of object and for that you can use lodash.
var obj = {
'name[first[foo]]': 'john',
'name[last]': 'doe',
'name[last[foo[bar]]]': 'doe'
}
var result = Object.keys(obj).reduce(function(r, e) {
var key = e.replace(/\[/g, '.').replace(/\]/g, '').split('.')
var o = {}
key.reduce(function(re, el, i) {
return i != key.length - 1 ? re[el] = {} : re[el] = obj[e]
}, o)
r = _.merge(r, o)
return r;
}, {})
console.log(JSON.stringify(result, 0, 4))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

Using a for..in loop and constructing a new object:
var obj = {
'name[first]': 'john',
'name[last]': 'doe'
};
var newObj = {}
for (var key in obj) {
var parts = key.split(/\[|\]/);
if(!newObj.hasOwnProperty(parts[0]))
newObj[parts[0]] = {};
newObj[parts[0]][parts[1]] = obj[key];
}
console.log(newObj);

The solution using Object.keys, Array.prototytpe.reduce and String.prototype.match functions:
var obj = {'name[first]': 'john', 'name[last]': 'doe'};
var result = Object.keys(obj).reduce(function (o, key) {
var parts = key.match(/^(\w+)\[(\w+)\]$/);
if (!o[parts[1]]) {
o[parts[1]] = {};
}
o[parts[1]][parts[2]] = obj[key];
return o;
}, {});
console.log(result);

var obj = {
'name[first]': 'john',
'name[last]': 'doe'
}
var newObj = {};
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
var keys = property.match(/(\w+)/g);
if (keys && keys.length == 2) {
newObj[keys[0]] = newObj[keys[0]] || {};
newObj[keys[0]][keys[1]] = obj[property];
}
}
}
console.log(newObj);

You can try the following:
var obj = {
'name[first]': 'john',
'name[last]': 'doe'
}
var result = Object.keys(obj).reduce(function(newObj, prop) {
var key = prop.split(/\[|\]/)[1];
newObj[key] = obj[prop];
return newObj;
}, {})
console.log(result);

Fill in missing properties in an array of objects

What is the best way to fill in missing properties in an array of objects, such as this example:
[
{
name: 'Tom',
number: '01234 567 890',
website: 'http://www.tom.com'
},
{
name: 'Richard',
number '07777 666 555'
},
{
name: 'Harry',
website: 'http://www.harry.com'
}
]
I need to add the missing properties with a null value, so that when I pass this array on to be rendered in something such as a HTML table or CSV file, everything lines up correctly. I was thinking of passing over the array twice, once to get all the possible properties, and a second time to add those missing properties with a null value to each object where it doesn't exist. Is there a better way to do this?
EDIT: I won't know what the keys are until I have the data, it's coming from an API and the keys are not always requested explicitly.
My final solution
Thanks all, it seems the two pass approach is indeed the best approach. After I started to write this using the examples provided, I realised that the order of the properties wasn't being maintained. This is how I achieved filling in the missing props, and maintaining the correct order. Any suggestions for potential improvements are welcome.
var fillMissingProps = function(arr) {
// build a list of keys in the correct order
var keys = [];
arr.forEach(function(obj) {
var lastIndex = -1;
Object.keys(obj).forEach(function(key, i) {
if (keys.includes(key)) {
// record the position of the existing key
lastIndex = keys.lastIndexOf(key);
if (lastIndex < i) {
// this key is in the wrong position so move it
keys.splice(i, 0, keys.splice(lastIndex, 1)[0]);
lastIndex = i;
}
} else {
// add the new key in the correct position
// after the previous existing key
lastIndex++;
keys.splice(lastIndex, 0, key);
}
});
});
// build a template object with all props set to null
// and in the correct position
var defaults = {};
keys.forEach(function(key) {
defaults[key] = null;
});
// and update the array by overwriting each element with a
// new object that's built from the template and the original object
arr.forEach(function(obj, i, arr) {
arr[i] = Object.assign({}, defaults, obj);
});
return arr;
};
/** TEST **/
var currentArray = [
{
website: 'http://www.unknown.com'
},
{
name: 'Tom',
number: '01234 567 890',
website: 'http://www.tom.com'
},
{
title: 'Mr',
name: 'Richard',
gender: 'Male',
number: '04321 666 555'
},
{
id: '003ABCDEFGHIJKL',
name: 'Harry',
website: 'http://www.harry.com',
mobile: '07890 123 456',
city: 'Brentwood',
county: 'Essex'
}
];
var newArray = fillMissingProps(currentArray);
for (var i = 0; i < newArray.length; i++) {
for (var prop in newArray[i]) {
console.log(prop + ": " + newArray[i][prop]);
}
console.log('---------');
}

Given that you don't know apriori which keys are supposed to exist, you have no choice but to iterate over the array twice:
// build a map of unique keys (with null values)
var keys = {}
array.forEach(el => Object.keys(el).forEach(k => keys[k] = null));
// and update the array by overwriting each element with a
// new object that's built from the null map and the original object
array.forEach((el, ix, a) => a[ix] = Object.assign({}, keys, el));

Use Array.prototype.map():
const arr = [
{
name: 'Tom',
number: '01234 567 890',
website: 'http://www.tom.com',
},
{
name: 'Richard',
number: '07777 666 555',
},
{
name: 'Harry',
website: 'http://www.harry.com',
},
];
const newArr = arr.map(x => (
arr.map(x => Object.keys(x))
.reduce((a, b) =>
(b.forEach(z => a.includes(z) || a.push(z)), a)
)
.forEach(
y => (x[y] = x.hasOwnProperty(y) ? x[y] : null)
), x)
);
console.log(newArr);

Here is a more interesting answer, its a tad fun one but it will build up your objects on the fly as new properties appear:
var currentArray = [
{
name: 'Tom',
number: '01234 567 890',
website: 'http://www.tom.com'
},
{
name: 'Richard',
number: '07777 666 555'
},
{
name: 'Harry',
website: 'http://www.harry.com'
}
]
var newArray = []
function NewObject() {
}
for(var i = 0; i < currentArray.length; i++){
var nObj = new NewObject();
for(var prop in currentArray[i]){
if(!NewObject.hasOwnProperty(prop))
NewObject.prototype[prop] = null;
nObj[prop]=currentArray[i][prop];
}
newArray.push(nObj);
}
for(var i = 0; i < newArray.length; i++){
for(var prop in newArray[i]){
console.log(prop+ ": "+newArray[i][prop]);
}
console.log('---------');
}
It builds new objects from the ones you provide and adds new properties to the objects if they don't exist already.
This idea was more for curiosities sake tho so any comments would be interesting :)

You can get all keys and set all keys using for..of loop, .map() to iterate all Object.keys(), redefine original array
var arr = [{
name: 'Harry',
website: 'http://www.harry.com'
},{
name: 'Tom',
number: '01234 567 890',
website: 'http://www.tom.com'
}, {
name: 'Richard',
number: '07777 666 555'
}];
for (var obj of arr) {
for (var key of Object.keys(obj)) {
arr = arr.map(o => (o[key] = o[key] || null, o))
}
};
console.log(arr);

Something like this could work:
for (var i = 0; i < arrayLength; i++) {
yourArray[i].name = yourArray[i].name || null;
yourArray[i].number = yourArray[i].number || null;
yourArray[i].website= yourArray[i].website|| null;
}

Transform table-like 2-dimensional array to object (JavaScript)

I have a 2-dimensional array that looks like this:
var myArray = [
['Name', 'Age', 'Profession'],
['John', 34, 'Teacher'],
['Jane', 45, 'Artist']
];
I want to transform this array to an object that looks like this:
var myObject =
{
"Name":
{
"Name": "Name",
"Age": "Age",
"Profession": "Profession"
}
"John":
{
"Name": "John",
"Age": 34,
"Profession": "Teacher"
}
"Jane":
{
"Name": "Jane",
"Age": 45,
"Profession": "Artist"
}
};
In another thread I came across Array.prototype.reduce() and I was able to do the following:
var myObject = myArray.reduce(function(result, currentItem) {
result[currentItem[0]] = currentItem;
return result;
}, {})
Logger.log(myObject);
// {John=[John, 34.0, Teacher], Jane=[Jane, 45.0, Artist], Name=[Name, Age, Profession]}
However, I don't know how to apply reduce() to get a nested object or if I need a different approach here.
Andreas
Edit:
I am looking for an dynamical solution, that is: I don't know beforehand how many elements my array contains or what their values are.
I'd prefer a solution that is faster and more elegant than iterating through all elements (if possible).

A solution with reduce and an object and some nested properties.
var myArray = [['Name', 'Age', 'Profession'], ['John', 34, 'Teacher'], ['Jane', 45, 'Artist']],
result = myArray.reduce(function (r, a) {
// get the first element ('Name', 'John', 'Jane') of myArray and take it as a key
// for the object. generate a new object if there is no object available
// read here: r.Name = r.Name || {}
r[a[0]] = r[a[0]] || {};
// iterate over ['Name', 'Age', 'Profession']
myArray[0].forEach(function (b, i) {
// assign the according value to the according property of the object
// read here: r.Name.Name = 'Name'
// next r.Name.Age = 'Age'
r[a[0]][b] = a[i];
});
return r;
}, {});
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

myArray.reduce(
function ( r, a )
{
var row = a.reduce(
function ( rr, cc, i )
{
rr[ myArray[ 0 ][ i ] ] = cc;
return rr;
}, {} );
r[ a[ 0 ] ] = row;
return r;
}, {} );
The idea is that do the same reduce at each row.
var myArray = [
['Name', 'Age', 'Profession'],
['John', 34, 'Teacher'],
['Jane', 45, 'Artist']
];
var result = myArray.reduce(
function(r, a) {
var row = a.reduce(
function(rr, cc, i) {
rr[myArray[0][i]] = cc;
return rr;
}, {});
r[a[0]] = row;
return r;
}, {});
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

I think that the easiest way to do this could be using map function
var myArray = [
['Name', 'Age', 'Profession'],
['John', 34, 'Teacher'],
['Jane', 45, 'Artist']
];
var myObjects = myArray.map(function(el) {
return {
'Name': el[0],
'Age': el[1],
'Profession': el[2]
}
});
The other way is to just use on for statement
for(int i=1;myArray.length;i++)
{
var el = myArray[i];
myObjects2[el[0]] = {
'Name': el[0],
'Age': el[1],
'Profession': el[2]
}
}