CODEWITHSUNDEEP
javascriptarrays
wysiwyg
wysiwyg

Reputation: 53

Joining elements of a nested object array

I have the following array:

[
  {
    "OrderID": 1,
    "OrderDetails": [
      {
        "OrderDetailID": 7,
    "ProductCode": "E456",
        "Quantity": 1,
      },
      {
        "OrderDetailID": 8,
    "ProductCode": "E888",
        "Quantity": 2
      }
    ],
    "OrderDate": "8/1/2018"
  },
  {
    "OrderID": 2,
    "OrderDetails": [
      {
        "OrderDetailID": 9,
    "ProductCode": "N522",
        "Quantity": 3
      }
    ],
    "OrderDate": "10/1/2018"
  }
]

Using JavaScript, I need to concatenate all the productCodes into a string so the result should look like this:

E456;E888;N522

I have tried to use the map function to get OrderDetails and was able to do so. But when I chained the map functions again like below, the details variable always returned undefined so I cant even call the join function to do the concatenation:

var details = this.orderData.map(function(i) {
     return {
         detail: i.OrderDetails
     }}).map(function(j) {
        return {
           x: j.detail.ProductCode
        }});

Upvotes: 2

Views: 507

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 370729

Use .reduce instead of .map, pushing each ProductCode to the accumulator array, then join by ;:

const input = [{
    "OrderID": 1,
    "OrderDetails": [{
        "OrderDetailID": 7,
        "ProductCode": "E456",
        "Quantity": 1,
      },
      {
        "OrderDetailID": 8,
        "ProductCode": "E888",
        "Quantity": 2
      }
    ],
    "OrderDate": "8/1/2018"
  },
  {
    "OrderID": 2,
    "OrderDetails": [{
      "OrderDetailID": 9,
      "ProductCode": "N522",
      "Quantity": 3
    }],
    "OrderDate": "10/1/2018"
  }
];
const productCodes = input.reduce((a, { OrderDetails }) => {
  a.push(...OrderDetails.map(({ ProductCode }) => ProductCode));
  return a;
}, []);
console.log(productCodes.join(';'));

Or, on newer browsers or using a polyfill, you can golf it down even more with flatMap:

const productCodes = input.flatMap(
  ({ OrderDetails }) => OrderDetails.map(
    ({ ProductCode }) => ProductCode
  )
);


const input = [{
    "OrderID": 1,
    "OrderDetails": [{
        "OrderDetailID": 7,
        "ProductCode": "E456",
        "Quantity": 1,
      },
      {
        "OrderDetailID": 8,
        "ProductCode": "E888",
        "Quantity": 2
      }
    ],
    "OrderDate": "8/1/2018"
  },
  {
    "OrderID": 2,
    "OrderDetails": [{
      "OrderDetailID": 9,
      "ProductCode": "N522",
      "Quantity": 3
    }],
    "OrderDate": "10/1/2018"
  }
];
const productCodes = input.flatMap(
  ({ OrderDetails }) => OrderDetails.map(
    ({ ProductCode }) => ProductCode
  )
);
console.log(productCodes.join(';'));

Upvotes: 1

guijob
guijob

Reputation: 4488

const arr=[{OrderID:1,OrderDetails:[{OrderDetailID:7,ProductCode:"E456",Quantity:1},{OrderDetailID:8,ProductCode:"E888",Quantity:2}],OrderDate:"8/1/2018"},{OrderID:2,OrderDetails:[{OrderDetailID:9,ProductCode:"N522",Quantity:3}],OrderDate:"10/1/2018"}];

const resp = arr.map(x => x.OrderDetails.map(y => y.ProductCode).join(';')).join(';');

console.log(resp)

Upvotes: 1

Related Questions