How to loop through array of objects and add new object key based on condition in JavaScript?

Question

I have the following array of objects:

[{"id":0,"name":"Katy","age":22},
{"id":2,"name":"Lucy","age":12},
{"id":1,"name":"Jenna","age":45},
{"id":3,"name":"Ellie","age":34}]

I need to add another key into the objects (PaymentCategory) where whichever object has the lowest ID is added the key with value "Cash", the one with highest ID "Card", and everything in between "Cheque"; the array also must then be sorted by ID.

Hence required output would be:

[{"PaymentCategory":"Cash","id":0,"name":"Katy","age":22},
{"Payment Category":"Cheque","id":1,"name":"Jenna","age":45},
{"Payment Category":"Cheque","id":2,"name":"Lucy","age":12},
{"Payment Category":"Card","id":3,"name":"Ellie","age":34}]

How can we achieve this result in the most efficient way, i.e. fewest number of iterations, highest performance?

Here's what I tried:

const min = array.reduce((prev,curr)=> prev.id<curr.id?prev:curr)
  const max = array.reduce((prev,curr)=> prev.id>curr.id?prev:curr)
  min.PaymentCategory = "Cash"
  max.PaymentCategory = "Credit"
  const result =[min, max]

The problem with this is:

I'm looping through it twice, one for max, one for min.
How do I get the "middle" values?

Sorry @Peter Seliger for the late reply and answer acception, I had lost my account access in between, hence couldn't see/accept answers. Thanks Peter Seliger and Ali for taking time for answering this question, I was able to verify the output through code. — Min Yoongi
– Min Yoongi, Commented Nov 20, 2021 at 16:09

Peter Seliger · Accepted Answer · 2021-11-09 15:40:57Z

The following provided approach is straightforward and first does sort the items of a shallow array copy ([...sampleData]) in an ascending order ( .sort((a, b) => a.id - b.id) ) of id values.

The final task does map each (sorted) item in a way which creates a shallow copy ({ ...item }) and in addition creates a 'Payment Category' entry where the first item ( idx === 0 ) gets assigned the 'Cash' value, the last item ( (idx === arr.length - 1) ) gets assigned the 'Card' value, and all other get assigned the 'Cheque' value.

The entire approach does not mutate the originally provided data ...

const sampleData = [
  { id: 0, name: "Katy", age: 22 },
  { id: 2, name: "Lucy", age: 12 },
  { id: 1, name: "Jenna", age: 45 },
  { id: 3, name: "Ellie", age: 34 },
];

console.log(
  'mapped `sampleData` items ...',

  [...sampleData]
    .sort((a, b) => a.id - b.id)
    .map((item, idx, arr) => ({
      ...item,
      'Payment Category': ((idx === 0)
        && 'Cash') || ((idx === arr.length - 1)
        && 'Card') || 'Cheque',
    }))
);
console.log('unmutated `sampleData` ...', sampleData);

.as-console-wrapper { min-height: 100%!important; top: 0; }

The above approach in an even more readable way ...

const copyItemAndAugmentPaymentCategory = (item, idx, arr) => ({
  ...item,
  'Payment Category': ((idx === 0)
    && 'Cash') || ((idx === arr.length - 1)
    && 'Card') || 'Cheque',
});
const compareItemIdPrecedenceAscending = (a, b) => a.id - b.id;

console.log(
  [
    { id: 0, name: "Katy", age: 22 },
    { id: 2, name: "Lucy", age: 12 },
    { id: 1, name: "Jenna", age: 45 },
    { id: 3, name: "Ellie", age: 34 },
  ]
  .sort(compareItemIdPrecedenceAscending)
  .map(copyItemAndAugmentPaymentCategory)
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Armen Michaeli · Accepted Answer · 2021-11-10 12:54:31Z

1

you can do like this

const array =[{"id":0,"name":"Katy","age":22},
{"id":2,"name":"Lucy","age":12},
{"id":1,"name":"Jenna","age":45},
{"id":3,"name":"Ellie","age":34}]

const arrayLength= array.length
  
const newA=array.map( (element,index) =>  { if (index===0) return {"PaymentCategory":"Cash", ...element}
else if ( index===arrayLength-1 )return {"PaymentCategory":"Card", ...element}
else return {"PaymentCategory":"Cheque", ...element}})

check map method in arrays to learn more : https://learnjsx.com/category/2/posts/es6-mapFunction

edited Nov 10, 2021 at 12:54

Armen Michaeli

9,2709 gold badges66 silver badges101 bronze badges

answered Nov 9, 2021 at 12:50

Ali

1361 silver badge3 bronze badges

1 Comment

lost_in_magento Over a year ago

What if the id is not equivalent to the length of the array?

Collectives™ on Stack Overflow

How to loop through array of objects and add new object key based on condition in JavaScript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related