Renaming keys in an object using reduce method in JS

Question

Following is the object in which I want to replace countryID with value , countryName with label .

In the same object I am having localLanguages Array in which I am trying to rename language with label and languageCode with value .

array -

var obj = [{
    "countryID": "CON1010",
    "countryName": "Poland",
    "countryCode": "pl",
    "localLanguages": [{
        "language": "English",
        "languageCode": "en"
      },
      {
        "language": "Polish",
        "languageCode": "en"
      }
    ]
  },
  {
    "countryID": "CON1011",
    "countryName": "UK",
    "countryCode": "uk",
    "localLanguages": [{
      "language": "English",
      "languageCode": "en"
    }]
  }
];

Transformed to -

var obj = [{
    "value": "CON1010",
    "label": "Poland",
    "countryCode": "pl",
    "localLanguages": [{
        "label": "English",
        "value": "en"
      },
      {
        "label": "Polish",
        "value": "en"
      }
    ]
  },
  {
    "value": "CON1011",
    "label": "UK",
    "countryCode": "uk",
    "localLanguages": [{
      "label": "English",
      "value": "en"
    }]
  }
];

Code -

arr.map(x => {
  var newObj = Object.keys(x).reduce((obj, key) => {
    if (key !== 'countryID') {
      obj[key] = x[key]
    }

    if (key === 'countryID') {
      obj.value = x.countryID;
    }
  }, {})
  console.log(newObj);

  return newObj;
})

Answer 1

Use Array.map() to convert the outer objects, and another map to convert the localLanguages :

 const arr = [{"countryID":"CON1010","countryName":"Poland","countryCode":"pl","localLanguages":[{"language":"English","languageCode":"en"},{"language":"Polish","languageCode":"en"}]},{"countryID":"CON1011","countryName":"UK","countryCode":"uk","localLanguages":[{"language":"English","languageCode":"en"}]}]; const result = arr.map(o => ({ value: o.countryID, label: o.countryName, countryCode: o.countryCode, localLanguages: o.localLanguages.map(l => ({ value: l.languageCode, label: l.language })) })); console.log(result)

Answer 2

You have forgotten to return obj value in the reduce function

 var newObj = Object.keys(x).reduce( (obj, key) => {
    if(key !== 'countryID') {
      obj[key] = x[key]
    }

    if(key === 'countryID') {
      obj.value = x.countryID;
    }
  }, {})

Answer 3

Here the function to change the keys. Use it with every element of you array
recursively, but check the type of every element

function changeKeys(obj) {
  const rename = {
    'countryID': 'value',
    'countryName': 'label',
    'language': 'label',
    'languageCode': 'value'
  }
  return Object.keys(obj)
    .reduce(
    (acc, rec) => {
      if (typeof rename[rec] !== 'undefined') {
        return {...acc, [rename[rec]]: obj[rec]}
      }
      return {...acc, [rec]: obj[rec]}
    }, {}
  )
}

Answer 4

Here is a solution with es6 Destructuring and map:

 const arr = [{"countryID":"CON1010","countryName":"Poland","countryCode":"pl","localLanguages":[{"language":"English","languageCode":"en"},{"language":"Polish","languageCode":"en"}]},{"countryID":"CON1011","countryName":"UK","countryCode":"uk","localLanguages":[{"language":"English","languageCode":"en"}]}];

 const result = arr.map(item => {

  let localLanguages = item.localLanguages.map(i => {
    const { language: label, languageCode: value, ...rest } = i;
    return { label, value, ...rest };
  });

  const { countryID: value, countryName: label, ...rest } = item;

  return { value, label, ...rest, localLanguages };
});

console.log(result)