How to dynamically change the key name in an array of objects?

Is there a way to change the key names in an array of object?

Code:
List of value to change the key name.

var keys = {
    id:'identifier',
    facility:'site',
    status:'info',
    date:'days'
};

Array of object to change the key names

var arrayObj = [{
    id:'jr210',
    facility:'earth',
    status:'sample info',
    date:'Feb 29, 2020'
},
{
    id:'tl980',
    facility:'mars',
    status:'sample info',
    date:'Jan 15, 2020'
}]

Expected output:

var newArrayObj = [{
        identifier:'jr210',
        site:'earth',
        info:'sample info',
        days:'Feb 29, 2020'
    },
    {
        identifier:'tl980',
        site:'mars',
        info:'sample info',
        days:'Jan 15, 2020'
    }]

2 thoughts on “How to dynamically change the key name in an array of objects?”

  1. You can use reduce and Object.entries for the operation.

    1. reduce is to re-group the property in the object
    2. Object.entries is to retrieve the key and value pairs in the object.
    type KeyForFinalResult = 'identifier'|'site'|'info'| 'days'
    type KeyForReferenceKeys = 'id' | 'facility' | 'status' | 'date' 
    
    type TempObjectType = {
        [T in KeyForReferenceKeys | string ]: string
    }
    
    type FinalObjectType = {
        [T in KeyForFinalResult | string]: string
    }
    
    var keys: TempObjectType  = {
        id:'identifier',
        facility:'site',
        status:'info',
        date:'days'
    };
    
    
    var arrayObj:TempObjectType[] = [{
        id:'jr210',
        facility:'earth',
        status:'sample info',
        date:'Feb 29, 2020'
    },
    {
        id:'tl980',
        facility:'mars',
        status:'sample info',
        date:'Jan 15, 2020'
    }]
    
    
    const result = arrayObj.reduce((finalResult: FinalObjectType[], elem)=>{
        let temp: FinalObjectType = {} as FinalObjectType
    
        Object.entries(keys).forEach((entry: string[] )=> {
            //each entry: [[key, value],[key1, value1]...]
            temp[entry[1]] = elem[entry[0]]
        })
        
        finalResult.push(temp)
     
        return finalResult
    },[])
    
    
    console.log(result)
    
    Reply
  2. This is a mapping task. Like almost every array method map allows a 2nd argument, the thisArg, a context which is bound to the callback method’s apply/call time.

    The provided approach implements a callback method remapObjectWithBoundKeys which utilizes its this context as configuration of how to remap each of an object’s key. It does so by reduceing the entries of its key-config and creating a new object by iteratively assigning new key-value pairs to it.

    var sampleList = [{
      id:'jr210',
      facility:'earth',
      status:'sample info',
      date:'Feb 29, 2020',
    }, {
      id:'tl980',
      facility:'mars',
      status:'sample info',
      date:'Jan 15, 2020',
    }];
    
    function remapObjectWithBoundKeys(item) {
      const keyConfig = this;
      return Object
        .entries(keyConfig)
        .reduce((obj, [recentKey, currentKey]) => Object.assign(obj, {
          [currentKey]: item[recentKey]
        }), {});
    }
    
    console.log(
      sampleList.map(remapObjectWithBoundKeys, {
        id: 'identifier',
        facility: 'site',
        status: 'info',
        date: 'days',
      })
    );
    .as-console-wrapper { min-height: 100%!important; top: 0; }
    Reply

Leave a Comment