Typescript mapping data structure

Question

Typescript mapping data structure

Currently, I am facing the challenge of mapping complex models.

My data consists of an array of Carts with attributes such as id and name.
In addition, there is a dictionary where each key represents a type and its corresponding value includes different products.

For visualization purposes, I have included a sample output at the bottom of this page.

Although I have made some progress in my attempt, I am currently stuck on how to effectively filter the data.

carts.forEach(cart => {
    const productList = cart.products; //list of products

    Object.entries(content.data).forEach(([key, values]) => {
      const sizeList = values.map(x => x.sizeList); //list of size
      // i am stuck here
    });
  });

javascript typescript ecmascript-6

Answer 1

Answer №1

const getProductsWithSizes = (products = [], info = {}) => {
  // create a Map with productId-sizeId as key, and size name as value
  const productSizeNameMap = 
    Object.values(info)
    .flat()
    .reduce((map, { productId, sizeList = [] }) => {
      sizeList.forEach(({ sizeId, name }) =>
        map.set(`${productId}-${sizeId}`, name)
      );
      return map;
    }, new Map);
  // return updated product list with names based on productSizeNameMap
  return products.map(({ id, title, sizes = [] }) => ({
    id: id,
    title: title,
    availableSizes: sizes.map(({ id, size, quantity, availability }) => ({
      id, quantity, availability, name: productSizeNameMap.get(`${id}-${size}`)
    }))
  }));
}

const 
  products = [
    {
      id: 500,
      title: "Product One",
      sizes: [ { id: 1, size: 10, quantity: 1, availability: true }, { id: 2, size: 13, quantity: 10, availability: true } ]
    }
  ],
  info = {
    "Drinks": [
      { productId: 1, sizeList: [ { sizeId: 10, name: "100ml beer" }, { sizeId: 9, name: "200ml beer" } ]
      }
    ],
    "Food": [
      {
        productId: 2,
        sizeList: [ { sizeId: 12, name: "6 wings" }, { sizeId: 13, name: "12 wings" } ]
      }
    ]
};

console.log( getProductsWithSizes(products, info) );

Answer 2

const getProductsWithSizes = (products = [], info = {}) => {
  // create a Map with productId-sizeId as key, and size name as value
  const productSizeNameMap = 
    Object.values(info)
    .flat()
    .reduce((map, { productId, sizeList = [] }) => {
      sizeList.forEach(({ sizeId, name }) =>
        map.set(`${productId}-${sizeId}`, name)
      );
      return map;
    }, new Map);
  // return updated product list with names based on productSizeNameMap
  return products.map(({ id, title, sizes = [] }) => ({
    id: id,
    title: title,
    availableSizes: sizes.map(({ id, size, quantity, availability }) => ({
      id, quantity, availability, name: productSizeNameMap.get(`${id}-${size}`)
    }))
  }));
}

const 
  products = [
    {
      id: 500,
      title: "Product One",
      sizes: [ { id: 1, size: 10, quantity: 1, availability: true }, { id: 2, size: 13, quantity: 10, availability: true } ]
    }
  ],
  info = {
    "Drinks": [
      { productId: 1, sizeList: [ { sizeId: 10, name: "100ml beer" }, { sizeId: 9, name: "200ml beer" } ]
      }
    ],
    "Food": [
      {
        productId: 2,
        sizeList: [ { sizeId: 12, name: "6 wings" }, { sizeId: 13, name: "12 wings" } ]
      }
    ]
};

console.log( getProductsWithSizes(products, info) );

Typescript mapping data structure

Answer №1

Similar questions

Ajax - Trouble with Updating DIV Content

Is there a way to nest arrays within arrays in JavaScript?

Unexpected token encountered when using JSON.parse()

Save the output to the server's file

Is it feasible to retrieve an object from AWS S3 in Blob format using AWS SDK for JavaScript V3?

Here is a way to return a 400 response in `express.js` when the JSON request body is invalid

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

Ways to access PromiseValue in XMLHttpRequest with JSON

obtain the text content from HTML response in Node.js

Comparing ngrx and redux for managing state in stateless components

What is the method for retrieving a property from an object contained within an array that is assigned to a property of another object?

When encountering issues with the select element, such as when it is combined with AJAX or Bootstrap,

underscore's _.each() method for callback functions

Tips for delaying the evaluation of an <input> field?

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

Is it possible to apply (max / min) to a mongoose string?

Execute JavaScript code once the XMLHttpRequest has completed execution

What are some ways I can efficiently download large attachments without disrupting the user's experience?

looping through the multi-dimensional array using v-for

Ways to achieve 8 columns in a single row using Javascript and Bootstrap