Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript dotted object keys to object

How do you convert a dotted keys into a javascript object and retain it's value?

So I got this kind of response from an API and I need to parse it by key: value.

{
  "property": "personal_info.address.city",
  "description": "Missing field"
},
{
  "property": "personal_info.address.country",
  "description": "Missing field"
},

So I achieved this:

{
    'personal_info.address.city': 'Missing field',
    'personal_info.address.country': 'Missing field'
}

// by using this code (lodash)

_.mapValues(_.keyBy(obj, 'property'), function(o) {
  return o.description;
})

however, i need it to be like this:

{
    personal_info: {
        address: {
            city: 'Missing field',
            country: 'Missing field',
        }
    }
}

I somehow searched in stackoverflow how to convert a dot notation string into an object here: Convert string with dot notation to JSON

but I'm stuck since I'm changing the key itself.

EDIT: Changed test city and test country to reflect the description field (sorry)

like image 956
Angelo Ab Avatar asked Mar 15 '18 14:03

Angelo Ab


People also ask

Can JavaScript object keys be objects?

JavaScript object property names (keys) can only be strings or Symbols — all keys in the square bracket notation are converted to strings unless they are Symbols.

What is {} object in JavaScript?

Using an Object Literal This is the easiest way to create a JavaScript Object. Using an object literal, you both define and create an object in one statement. An object literal is a list of name:value pairs (like age:50) inside curly braces {}.

How do I access nested objects?

A nested data structure is an array or object which refers to other arrays or objects, i.e. its values are arrays or objects. Such structures can be accessed by consecutively applying dot or bracket notation.


2 Answers

You could use _.set from lodash.

Sets the value at path of object. If a portion of path doesn't exist, it's created. Arrays are created for missing index properties while objects are created for all other missing properties. Use _.setWith to customize path creation.

var array = [{ property: "personal_info.address.city", description: "Missing field" }, { property: "personal_info.address.country", description: "Missing field" }],
    object = array.reduce((o, { property, description }) => _.set(o, property, description), {});

console.log(object);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
like image 162
Nina Scholz Avatar answered Oct 17 '22 18:10

Nina Scholz


You could use forEach() loop and inside reduce() method to get result like this.

const data = [{"property": "personal_info.address.city","description": "Missing field"},{"property": "personal_info.address.country","description": "Missing field"}]

const result = {}
data.forEach(function(o) {
  o.property.split('.').reduce(function(r, e, i, arr) {
    return r[e] = (r[e] || (arr[i + 1] ? {} : o.description))
  }, result)
})

console.log(result)
like image 45
Nenad Vracar Avatar answered Oct 17 '22 18:10

Nenad Vracar