Map object values to keys - Javascript

Question

I have an array from an API call.

var response = {
  "data": {
    "data": [{
      "1": "Arun",
      "index": "name"
    }, {
      "1": 70.78,
      "index": "score"
    }]
  }
}

I connect to a lot of other API's and they return me a similar response but the keys change. Sometimes it might be

var response = {
  "data": {
    "data": [{
      "values": "Harry",
      "index": "name"
    }, {
      "values": 45,
      "index": "score"
    }]
  }
}

var response = {
  "data": {
    "data": [{
      "4": "Richard",
      "index": "name"
    }, {
      "4": 98,
      "index": "score"
    }]
  }
}

I would like to get an array like this.

[
  {
    name: 'Arun',
    score: 70.78
  }
]

This is what I did.

var response = {
  "data": {
    "data": [{
      "1": "Arun",
      "index": "name"
    }, {
      "1": 70.78,
      "index": "score"
    }]
  }
}

const result = [];

const mappedData = _.map(response.data.data, (item) => {
  return {
    [item.index]: item[1]
  };
});

const resultObject = _.reduce(mappedData, (result, currentObject) => {
  for (const key in currentObject) {
    if (currentObject.hasOwnProperty(key)) {
      result[key] = currentObject[key];
    }
  }
  return result;
}, {});

result.push(resultObject)


console.log(result)

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

So instead of hardcoding "1" or "values" in the map function, is there a more universal way to get the key and achieve the same result?

Thanks.

Barmar · Accepted Answer · 2018-10-30 20:06:58Z

3

Use reduce rather than map, so you're updating the same object, not creating an array.

And since the property containing the value can vary, I use a loop to look for the first property that isn't named index, and use its value.

var response = {
  "data": {
    "data": [{
      "1": "Arun",
      "index": "name"
    }, {
      "1": 70.78,
      "index": "score"
    }]
  }
}

const mappedData = response.data.data.reduce((acc, item) => {
  var value;
  // find the property that isn't named "item"
  for (var i in item) {
    if (i != "index") {
      value = item[i];
      break;
    }
  }
  acc[item.index] = value;
  return acc;
}, {});

console.log(mappedData)

There's no need for lodash for this, the built-in reduce function is fine (but _.reduce will work similarly).

edited Oct 30, 2018 at 20:06

answered Oct 30, 2018 at 19:53

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

arunmmanoharan Over a year ago

Thanks Barmar. So in the reduce, I do not want to use item[1]. Is there a more universal way?

EmmanuelB Over a year ago

You need to eliminate the need for acc[item.index] = item[1] as the number [1] will change on different requests.

Barmar Over a year ago

If that can vary, how is the code supposed to know what the property is?

arunmmanoharan Over a year ago

Something based on key?

Barmar Over a year ago

It seems very strange that an API would return data like this. Are you sure there's no way to find out what the key is without searching?

|

Akrion · Accepted Answer · 2018-11-08 05:45:44Z

Since you only care about the values of that object and it only has two keys you can do this quite easily in lodash with reduce & fromPairs:

var response = { "data": { "data": [{ "1": "Arun", "index": "name" }, { "1": 70.78, "index": "score" }] } }

const rv = (o) => _.reverse(_.values(o))
const r = _.reduce(response.data.data, (a,c) => _.fromPairs([rv(a), rv(c)]))

console.log(r)

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

The same thing converted to ES6 would be:

var response = { "data": { "data": [{ "1": "Arun", "index": "name" }, { "1": 70.78, "index": "score" }] } }

const rv = (o) => Object.values(o).reverse()  // reverse values
const fp = (arr) => arr.reduce((r, [k,v]) => (r[k] = v, r), {}) // from pairs
const result = response.data.data.reduce((a,c) => fp([rv(a), rv(c)]))

console.log(result)

The main idea here is to first get the object values in an array form, reverse them so the key & value are in the correct order and then reduce that array via from pairs to create the final object.

The main advantage of this approach is that we never deal with the object keys and only focus on the values which is what you really care about. This way the keys can be any value and it would still not matter.

EmmanuelB · Accepted Answer · 2018-10-30 20:07:09Z

0

You could try deleting the key-pair index and using the first value of the resulting object:

const mappedData = _.map(response.data.data, (item) => {
  var tempObj = Object.assign({}, item)
  var index = tempObj.index;
  delete tempObj.index;
  var otherData = Object.values(tempObj)[0];
  return {
    [index]: otherData
  };
});

edited Oct 30, 2018 at 20:07

answered Oct 30, 2018 at 20:01

EmmanuelB

1,45712 silver badges24 bronze badges

2 Comments

EmmanuelB Over a year ago

Use a copy of the item so you don't delete the original and prevent latter debugging problems. If you are not going to use the response latter, then you can use item instead of tempObj.

arunmmanoharan Over a year ago

I wouldnt be using the original response again at all. The code you provided works but the array has 2 objects, whereas I need an array with one object and two keys in it.

Ved · Accepted Answer · 2018-10-30 20:43:42Z

0

Just modified the @barmar approach. I have used Object.keys to get keys from object. This will remove the any hard-coded dependency.

var response = {
  "data": {
    "data": [{
      "1": "Arun",
      "index": "name"
    }, {
      "1": 70.78,
      "index": "score"
    }]
  }
}

const mappedData = response.data.data.reduce((acc, item,i) => {
  
  var key = Object.keys(item);
  acc[item[key[1]]] =  item[key[0]]
  return acc ;
      
}, {});

console.log(mappedData)

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

edited Oct 30, 2018 at 20:43

answered Oct 30, 2018 at 20:34

Ved

12.1k5 gold badges46 silver badges61 bronze badges

4 Comments

Barmar Over a year ago

The order of properties in objects is not guaranteed. You can't be sure that the value will always be key[0] rather than key[1].

Barmar Over a year ago

But if you're willing to take that risk, you can use Object.values instead of Object.keys. Then you can do acc[values[1]] = values[0];

Ved Over a year ago

@Barmar I will look into your suggestion. As what i See in OP response, Object.key approach seems fine to me.

Barmar Over a year ago

Most implementations currently preserve order, but it could change at any time and the code will stop working.

Collectives™ on Stack Overflow

Map object values to keys - Javascript

4 Answers 4

9 Comments

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related