javascriptarray-maparray-reduce

How to properly map or reduce an Array of Arrays of objects in javascript?


I have the following array of array of objects that is a result of a CloudWatch query using AWS-SDK-V3 JS:

const respCW = [
  [
    { field: '@timestamp', value: '2022-10-25 15:30:36.685' },
    {
      field: '@message',
      value: 'foo'
    },
    {
      field: '@ptr',
      value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
  ],
  [
    { field: '@timestamp', value: '2022-10-25 15:04:56.155' },
    {
      field: '@message',
      value: 'bar'
    },
    {
      field: '@ptr',
      value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
  ]
]

I would lie to convert that array to the following:

const desiredResp = [
  {
    timestamp: '2022-10-25 15:30:36.685',
    message: 'foo'
  },
  {
    timestamp: '2022-10-25 15:04:56.155',
    message: 'bar'
  }
]

I have created the following code:

if(respCW.length>0){
  respCW.forEach( arrOfObje=> {
    let logObj = {
      timestamp:"",
      message:"",
    }
    arrOfObje.forEach(obj => {
      if(obj.field === '@timestamp' || obj.field === '@message'){
        if(obj.field === '@timestamp'){
          date = new Date(obj.value)
          logObj.timestamp = date.getTime()
        }
        if(obj.field === '@message'){
          logObj.message = obj.value
          newResult.push(logObj)
        }
      }
    })
  })
}

The code is working but I would like to know if there is a way to redesign it using array map or reduce.


Solution

  • By using .map() you can map each inner array to a new object, where you can use .find() to obtain the @timestamp and @message values:

    const respCW = [ [ { field: '@timestamp', value: '2022-10-25 15:30:36.685' }, { field: '@message', value: 'foo' }, { field: '@ptr', value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' } ], [ { field: '@timestamp', value: '2022-10-25 15:04:56.155' }, { field: '@message', value: 'bar' }, { field: '@ptr', value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' } ] ];
    
    const res = respCW.map(arr => {
      const timestamp = arr.find(obj => obj.field === "@timestamp").value;
      const message = arr.find(obj => obj.field === "@message").value;
      return {timestamp, message};
    });
    console.log(res);

    If you need to handle the case where your inner array won't have a @timestamp or @message, then you can use optional chaining (?.) with the nullish coalescing operator (??) to keep your code from crashing and to default the timestamp/message to an empty string:

    const respCW = [ [ { field: '@timestamp', value: '2022-10-25 15:30:36.685' }, { field: '@message', value: 'foo' }, { field: '@ptr', value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' } ], [ { field: '@timestamp', value: '2022-10-25 15:04:56.155' }, { field: '@message', value: 'bar' }, { field: '@ptr', value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' } ] ];
    
    const res = respCW.map(arr => {
      const timestamp = arr.find(obj => obj.field === "@timestamp")?.value ?? "";
      const message = arr.find(obj => obj.field === "@message")?.value ?? "";
      return {timestamp, message}
    });
    console.log(res);

    If you know that @timestamp will always be the first object and @message will always be the second, then you can skip the .find() operations and just grab the objects from the inner array's directly. Below I've used destructuring assignment (([ts, msg])) to obtain the array values:

    const respCW = [ [ { field: '@timestamp', value: '2022-10-25 15:30:36.685' }, { field: '@message', value: 'foo' }, { field: '@ptr', value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' } ], [ { field: '@timestamp', value: '2022-10-25 15:04:56.155' }, { field: '@message', value: 'bar' }, { field: '@ptr', value: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' } ] ];
    
    const res = respCW.map(([ts, msg]) => ({timestamp: ts.value, message: msg.value}));
    console.log(res);