Merge object in array with javascript

Question

I have three objects (productData, stockData, locationData). productData have two data productId, and productName. stockData have productId, locationId and stock. I wanna to merge it all to a new array. For example, I have three object like snippet code bellow then merge it:

const productData = [
  {productId: 1000,productName: 'Product 1000'},
  {productId: 1001,productName: 'Product 1001'}
];
const stockData = [
  {productId: 1000,locationId: 1,stock: 21},
  {productId: 1000,locationId: 2,stock: 8},
  {productId: 1001,locationId: 1,stock: 4},
  {productId: 1001,locationId: 2,stock: 10}
];
const locationData = [
  {locationId: 1,locationName: 'Location 1'},
  {locationId: 2,locationName: 'Location 2'}
];

I wanna to merge that object tobe a new array with result like:

const result = [
  {
    productName: 'Product 1000',
    stock: {
      total: 29,
      detail: [
        {
          locationName: 'Location 1',
          stock: 21
        },
        {
          locationName: 'Location 2',
          stock: 8
        }
      ]
    }
  },
  {
    productName: 'Product 1001',
    stock: {
      total: 14,
      detail: [
        {
          locationName: 'Location 1',
          stock: 4
        },
        {
          locationName: 'Location 2',
          stock: 10
        }
      ]
    }
  }
];

i have no idea, so far i do like this:

function mergeArrayObjects(arr1,arr2,arr3){

  let mulai = 0;
  let stok = 0;
  let stok2 = 0;
  let mulaiStok = 0;
  let detail = [];
  let merge = [];

  while(mulai < arr1.length){
        while(mulaiStok < arr2.length){
            if(arr1[0].productId === arr2[mulaiStok].productId){
                stok = stok + arr2[mulaiStok].stock
            }
            if(arr1[1].productId === arr2[mulaiStok].productId){
                stok2 = stok2 + arr2[mulaiStok].stock
            }
            mulaiStok++
        }

        merge.push({
          productName: arr1[mulai].productName,
          stock: {
            total:stok2,
            detail:detail}
        })
        mulai++
  }
  return merge;
}
console.log(mergeArrayObjects(productData, stockData, locationData))

"I want to do X" is not a question. What have you tried? How has it failed? — Scott Sauyet
– Scott Sauyet, Commented Jan 29, 2020 at 18:11

Diogo Peres · Accepted Answer · 2020-01-29 18:51:49Z

I would start by iterating the productData list and creating an empty product object for each one of them such as:

       let product = {
            productName: pd.productName,
            stock: {
                total: 0,
                detail: []
            }
        };

Then I would iterate the product list and search for their stock to add to the stock list details while increasing the total stock.

You can also start by iterating on the stockData list if you prefer.

This should do the job:

const productData = [
  {productId: 1000,productName: 'Product 1000'},
  {productId: 1001,productName: 'Product 1001'}
];
const stockData = [
  {productId: 1000,locationId: 1,stock: 21},
  {productId: 1000,locationId: 2,stock: 8},
  {productId: 1001,locationId: 1,stock: 4},
  {productId: 1001,locationId: 2,stock: 10}
];
const locationData = [
  {locationId: 1,locationName: 'Location 1'},
  {locationId: 2,locationName: 'Location 2'}
];



function mergeObj(productDataList, stockDataList, locationDataList) {
    let result = [];
    productDataList.forEach(pd => {
        let product = {
            productName: pd.productName,
            stock: {
                total: 0,
                detail: []
            }
        };
        let stockList = stockDataList.filter(sd => sd.productId === pd.productId);
        if (stockList.length > 0) {
            stockList.forEach(sl => {
                let location = locationDataList.find(ld => ld.locationId === sl.locationId);
                if (location) {
                    let detail = {
                        locationName: location.locationName,
                        stock: sl.stock
                    }
                    product.stock.total += sl.stock;
                    product.stock.detail.push(detail);
                } else {
                    console.error('Location not found for stock data');
                }

            })
        }

        result.push(product);
    });
    return result;
}

console.log('Object merged: ', mergeObj(productData, stockData, locationData));

arizafar · Accepted Answer · 2020-01-29 18:53:15Z

You can group stock and location data then map through product data as following

const productData = [
  { productId: 1000, productName: 'Product 1000' },
  { productId: 1001, productName: 'Product 1001' }
];
const stockData = [
  { productId: 1000, locationId: 1, stock: 21 },
  { productId: 1000, locationId: 2, stock: 8 },
  { productId: 1001, locationId: 1, stock: 4 },
  { productId: 1001, locationId: 2, stock: 10 }
];
const locationData = [
  { locationId: 1, locationName: 'Location 1' },
  { locationId: 2, locationName: 'Location 2' }
];

function group(arr, by) {
  return arr.reduce((acc, curr) => {
    let key = curr[by];
    delete curr[by];
    acc.set(key, [...acc.get(key) || [], curr]);
    return acc;
  }, new Map())
}

let groupedstockData = group(stockData, 'productId');
let groupedLocationData = group(locationData, 'locationId');

let out = productData.map(({ productName, productId }) => {
  let stockdata = groupedstockData.get(productId);
  let sum = 0;
  return {
    productName, stock: {
      detail: stockdata.map(({ locationId, stock }) => {
        let [{ locationName }] = groupedLocationData.get(locationId);
        sum += stock;
        return { locationName, stock }
      }), total: sum
    }
  }
});
console.log(out)

Scott Sauyet · Accepted Answer · 2020-01-29 21:45:20Z

0

Another technique, which started as a Ramda pipeline, pieces of which I replaced one by one until there were no Ramda functions left:

const combineStock = (productData, stockData, locationData) => {
  const products = productData .reduce ((a, {productId, productName}) => ({...a, [productId]: productName}), {})
  const locations = locationData .reduce ((a, {locationId, locationName}) => ({...a, [locationId]: locationName}), {})

  const collectStock = (stockLocations) => stockLocations .reduce ( 
    ({total, details}, {locationId, stock}) => ({
      total: total + stock,
      details: [... details, {locationName: locations [locationId], stock}]
    }),
    {total: 0, details: []}
  )
  
  return  Object.entries (
    Object .entries (
      stockData .reduce ((a, {productId, ... rest}) => ({... a, [productId]: [... (a [productId] || []), rest]}), {})
    ) 
    .reduce ((a, [k, v]) => ({... a, [k]: collectStock (v)}), {})
  )
  .map (([productId, stock]) => ({
    productName: products [productId],
    stock
  })) 
}

const productData = [{productId: 1000, productName: 'Product 1000'}, {productId: 1001, productName: 'Product 1001'}]
const stockData = [{productId: 1000, locationId: 1, stock: 21}, {productId: 1000, locationId: 2, stock: 8}, {productId: 1001, locationId: 1, stock: 4}, {productId: 1001, locationId: 2, stock: 10}]
const locationData = [{locationId: 1, locationName: 'Location 1'}, {locationId: 2, locationName: 'Location 2'}]

console .log (combineStock (productData, stockData, locationData))

This proceeds in several steps.

The first line turns productData into something like this:

{1000:"Product 1000", 1001: "Product 1001"}

and the next one does something similar for locationData. These just make it easier to look up their names given the ids.

We define the collectStock helper, which will transform an array like this:

[{locationId: 1, stock: 21}, {locationId: 2, stock: 8}]

into this:

{
  total: 29,
  details: [{locationName: "Location 1", stock: 21}, {locationName: "Location 2", stock: 8}]
}

using the locations lookup.

The remainder is the main function. The stockData .reduce (...) line creates a structure like this:

{
  "1000": [{"locationId": 1, "stock": 21}, {"locationId": 2, "stock": 8}], 
  "1001": [{"locationId": 1, "stock": 4}, {"locationId": 2, "stock": 10}]
}

After wrapping that up with Object.entries and calling the reduce on it with the call to collectStock, we get something like this:

{
  1000: {
    total: 29,
    details: [{locationName: "Location 1", stock: 21}, {locationName: "Location 2", stock: 8}]
  }, 
  1001: {
    total: 14,
    details: [{locationName: "Location 1", stock: 4}, {locationName: "Location 2", stock: 10}] 
  }
}

We then call Object.entries on that result and map the resulting pairs into our final format, using the products lookup.

answered Jan 29, 2020 at 21:45

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

3 Comments

Nina Scholz Over a year ago

do you have an idea, if an object is faster than a map and depending on creating, if for objects your method or s/t like (o[k], o) faster and with map to take a mapped full array (as i do) or a reduce with map.add(k, o)? and ... what is best paractice?

Scott Sauyet Over a year ago

@NinaScholz: I don't know which technique would be faster to create. We could of course write a quick performance test for that. But for access, I would bet that obj[key] is faster than map.get(key); there's been years more to optimize that and it doesn't involve a function call. However, unless the expected data is fairly large, the best performance might quite possibly be in not creating any separate data structure and only doing a find on the original array. I simply don't like the uglier code that would entail.

Nina Scholz Over a year ago

that sounds comprehensible.

Nina Scholz · Accepted Answer · 2020-01-30 13:49:23Z

You could take the advantage of Map and collect in the first step some related data with a key. Later take this values for a faster access without iterating the arrays again.

You need maps for locations, products and details of product and location which is empty at start.

From the products map get the values as result set.

Finally iterate stockData once and get the product and detail and detail does not exists for the given product and location create a new object and insert this into the details map and push it to the product's `detail's property.

At last update stock of detail and total of product.

const
    // main data
    productData = [{ productId: 1000, productName: 'Product 1000' }, { productId: 1001, productName: 'Product 1001' }],
    stockData = [{ productId: 1000, locationId: 1, stock: 21 }, { productId: 1000, locationId: 2, stock: 8 }, { productId: 1001, locationId: 1, stock: 4 }, { productId: 1001, locationId: 2, stock: 10 }],
    locationData = [{ locationId: 1, locationName: 'Location 1' }, { locationId: 2, locationName: 'Location 2' }],

    // maps as helpers
    locations = new Map(locationData.map(({ locationId, locationName }) => [locationId, locationName])),
    products = new Map(productData.map(({ productId, productName }) => [productId, { productName, stock: { total: 0, detail: [] } }])),
    details = new Map,

    // literally the result
    result = Array.from(products.values());

stockData.forEach(({ productId, locationId, stock }) => {
    var product = products.get(productId),
        detailKey = `${productId}|${locationId}`,
        detail = details.get(detailKey);

    if (!detail) {
        detail = { locationName: locations.get(locationId), stock: 0 };
        details.set(detailKey, detail);
        product.stock.detail.push(detail);
    }

    detail.stock += stock;
    product.stock.total += stock;
});

console.log(result);

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

Collectives™ on Stack Overflow

Merge object in array with javascript

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related