Javascript array restructuring for nested array

Question

I have an array of objects as mentioned below.

const inputArray =[
  {
    name: "Energy",
    quantity: [
      {
        qval: "100 ",
        unit: "unit1"
      },
      {
        qval: "200 ",
        unit: "unit2"
      }
    ],
  },
  {
    name: "Fat",
    quantity: [
      {
        qval: "300",
        unit: "unit3"
      }
    ],
  },
]

I'm trying to restructure this array using the following code and I got something as mentioned below

const outputArray = inputArray.map(function(item,i) {
  return {
    name: item.name,
    amount: (item.quantity[0] && 
    item.quantity[0].qval+item.quantity[0].unit)+'|'+ (item.quantity[1] && item.quantity[1].qval+item.quantity[1].unit),
 };

});

And here is the output I got

[
  {name: "Energy", amount: "100 unit1|200 unit2"}
  {name: "Fat", amount: "300unit3|undefined"}
]

Since I'm new to this, I don't think this is a good method, please suggest any simpler neat code. I'm expecting

[
  {name: "Energy", amount: "100 unit1|200 unit2"}
  {name: "Fat", amount: "300unit3"}
]

Also I need to remove 'undefined' if that value doesn't exist. Please suggest.

score 2 · Accepted Answer · answered Mar 11 '19 at 19:47

2

there you go

inputArray.map(item => ({
    name: item.name,
    amount: item.quantity.reduce((accumulator, currentValue) => (accumulator+currentValue.qval+currentValue.unit+"|"),"").slice(0, -1)
}))

answered Mar 11 '19 at 19:47

linkinmedo

410
1
4
12

Thank you @linkinmedo. I could use your answer without much modification. – Shah Mar 13 '19 at 11:56

score 2 · Answer 2 · answered Mar 11 '19 at 20:16

Here's a pretty simple approach, using a map for the outer list and another one for the quantities for each:

const combine = arr => arr.map(({name, quantity}) => ({
  name, 
  amount: quantity.map(({qval, unit}) => `${qval}${unit}`).join('|')
}))

const inputArray = [{name: "Energy", quantity: [{qval: "100 ", unit: "unit1"}, {qval: "200 ", unit: "unit2"}]}, {name: "Fat", quantity: [{qval: "300", unit: "unit3"}]}]

console.log(combine(inputArray))

The biggest advantage of this approach over yours is that it works for any number of quantities per item. There is no special-case code for the first or second one.

chevybow · Answer 3 · 2019-03-11T19:48:21.437

You can add ternary conditions inside your map function to account for variables that might not be declared. For example:

const inputArray =[
  {
    name: "Energy",
    quantity: [
      {
        qval: "100 ",
        unit: "unit1"
      },
      {
        qval: "200 ",
        unit: "unit2"
      }
    ],
  },
  {
    name: "Fat",
    quantity: [
      {
        qval: "300",
        unit: "unit3"
      }
    ],
  },
]


const outputArray = inputArray.map(function(item,i) {
  return {
    name: item.name,
    amount: `${item.quantity[0] ? 
    item.quantity[0].qval+item.quantity[0].unit : ''}${item.quantity[1] ? `|${item.quantity[1].qval+item.quantity[1].unit}` : ''}`,
 };
})

console.log(outputArray);

If the properties of each of the objects isn't guaranteed either- you'd want to add checks for the properties themselves too. For example:

(item[0] && item[0].prop1 && item[0].prop2) ? 'stuff' : 'otherstuff'

score 0 · Answer 4 · answered Mar 11 '19 at 19:48

You should check for the existance of particular element at index before using it. Here the relevant changes:

const outputArray = inputArray.map(function(item, i) {
    var qt = "";
    if (item.quantity[0]) {
        qt += (item.quantity[0].qval + item.quantity[0].unit);
    }
    if (item.quantity[1]) {
        qt += '|';
        qt += (item.quantity[1].qval + item.quantity[1].unit);
    }
    return {
        name: item.name,
        amount: qt
    };
});

score 0 · Answer 5 · answered Mar 11 '19 at 19:48

Use a for loop to iterate through the length of item.quantity if there will be an uncertain number of items inside it:

const outputArray = inputArray.map(function(item, i) {
  let amountStr = "";
  for (i = 0; i < item.quantity.length; i++) {
    amountStr += item.quantity[i].qval + item.quantity[i].unit;
    // add delimiter when the current item is not the last one in the array
    if (i < quantity.length - 1) amountStr += "|";
  }
  return {
    name: item.name,
    amount: amountStr
 };

Javascript array restructuring for nested array

5 Answers5