Changing Array Object into a different Array Object (with Angular)

Question

Changing Array Object into a different Array Object (with Angular)

I am dealing with an array Object

[
{ product: "Product A", inStock: 3, onHold: 1, soldOut: 2 },
{ product: "Product B", inStock: 2, onHold: 0, soldOut: 1 }]

I am struggling to convert it into the new array format below. Any assistance would be greatly appreciated

[
{ inStock: 1, product: "Product A" },
{ inStock: 1, product: "Product A" },
{ onHold: 1, product: "Product A" },
{ soldOut: 1, product: "Product A" },
{ soldOut: 1, product: "Product A" },
{ inStock: 1, product: "Product B" },
{ inStock: 1, product: "Product B" },
{ soldOut: 1, product: "Product B" },

]

If the onHold value is 0, it should not appear in the new array

javascript arrays angular typescript

Answer 1

Answer №1

To achieve this, utilize the `reduce` function and within the callback, iterate over the current object to check if the value of the current key is a number and greater than 0.

let data = [{
    testName: "Test system",
    in: 2,
    low: 1,
    medium: 2
  },
  {
    testName: "Test app",
    in: 2,
    low: 1,
    medium: 0
  }
];

var result = data.reduce(function(acc, obj) {
  for (const key in obj) {
    if (!isNaN(obj[key]) && obj[key] > 0) {
      for (var i = 0; i < obj[key]; i++) {
        acc.push({testName: obj.testName, [key]: 1});
      }
    }
  }
  return acc;
}, []);
console.log(result)

Answer 2

To achieve this, utilize the `reduce` function and within the callback, iterate over the current object to check if the value of the current key is a number and greater than 0.

let data = [{
    testName: "Test system",
    in: 2,
    low: 1,
    medium: 2
  },
  {
    testName: "Test app",
    in: 2,
    low: 1,
    medium: 0
  }
];

var result = data.reduce(function(acc, obj) {
  for (const key in obj) {
    if (!isNaN(obj[key]) && obj[key] > 0) {
      for (var i = 0; i < obj[key]; i++) {
        acc.push({testName: obj.testName, [key]: 1});
      }
    }
  }
  return acc;
}, []);
console.log(result)

Answer 3

Answer №2

const data = [
    { title: "Software A", inStock: 2, lowStock: 1, mediumStock: 2 },
    { title: "App B", inStock: 2, lowStock: 1, mediumStock: 0 }]

let createNewItem = (_item, _category) => {
    const newItemArray = []
    for(let i = 0; i < _item[_category] || 0; i++){
        let newItem = {}
        newItem[_category] = 1
        newItem["title"] = _item["title"]        
        newItemArray.push(newItem)
    }
    return newItemArray;
}
newItemList = [];
data.forEach( (_item) => {
    ["inStock", "lowStock", "mediumStock"].forEach((_category) => {
        newItemList.push( ...createNewItem(_item, _category) )
    })
})
console.log(newItemList)

Answer 4

const data = [
    { title: "Software A", inStock: 2, lowStock: 1, mediumStock: 2 },
    { title: "App B", inStock: 2, lowStock: 1, mediumStock: 0 }]

let createNewItem = (_item, _category) => {
    const newItemArray = []
    for(let i = 0; i < _item[_category] || 0; i++){
        let newItem = {}
        newItem[_category] = 1
        newItem["title"] = _item["title"]        
        newItemArray.push(newItem)
    }
    return newItemArray;
}
newItemList = [];
data.forEach( (_item) => {
    ["inStock", "lowStock", "mediumStock"].forEach((_category) => {
        newItemList.push( ...createNewItem(_item, _category) )
    })
})
console.log(newItemList)

Answer 5

Answer №3

This question is more focused on JavaScript/TypeScript concepts rather than Angular-specific topics.

const data = [
  { targetName: "System A", in: 2, low: 1, medium: 2 },
  { targetName: "App X", in: 2, low: 1, medium: 0 },
];

data.reduce((finalResult, currentItem) => {
  const properties = Object.keys(currentItem).filter((property) => property !== "targetName");
  const additionalItems = properties.reduce((responseArray, property) => {
    let itemsToAdd: Record<string, string | number>[];
    for (let i = 1; i <= currentItem[property]; i++) {
      [...itemsToAdd, { [property]: 1, targetName: currentItem.targetName }];
    }
    return !!itemsToAdd ? [...responseArray, ...itemsToAdd] : responseArray;
  }, [] as Record<string, string | number>[]);
  return [...finalResult, ...additionalItems];
}, [] as Record<string, string | number>[]);

Answer 6

This question is more focused on JavaScript/TypeScript concepts rather than Angular-specific topics.

const data = [
  { targetName: "System A", in: 2, low: 1, medium: 2 },
  { targetName: "App X", in: 2, low: 1, medium: 0 },
];

data.reduce((finalResult, currentItem) => {
  const properties = Object.keys(currentItem).filter((property) => property !== "targetName");
  const additionalItems = properties.reduce((responseArray, property) => {
    let itemsToAdd: Record<string, string | number>[];
    for (let i = 1; i <= currentItem[property]; i++) {
      [...itemsToAdd, { [property]: 1, targetName: currentItem.targetName }];
    }
    return !!itemsToAdd ? [...responseArray, ...itemsToAdd] : responseArray;
  }, [] as Record<string, string | number>[]);
  return [...finalResult, ...additionalItems];
}, [] as Record<string, string | number>[]);

Answer 7

Answer №4

No one has attempted the flatMap method yet, so here is my solution:

   const list = [
  {
    testTargetname: 'Test system',
    in: 2,
    low: 1,
    medium: 2
  },
  {
    testTargetname: 'Test app',
    in: 2,
    low: 1,
    medium: 0
  }
]

const newList = list.flatMap((currentItem) => {
  const targetKey = 'testTargetname'
  return Object.entries(currentItem)
    .filter(([key]) => key !== targetKey)
    .map((item) => {
      const obj = Object.fromEntries([item])
      return {
        ...obj,
        [targetKey]: currentItem[targetKey]
      }
    })
})

console.log(newList)

Just a heads up, this example demonstrates how it can be mapped to the correct structure. If you need to filter specific values, you can simply use the filter function at the end.

Answer 8

No one has attempted the flatMap method yet, so here is my solution:

   const list = [
  {
    testTargetname: 'Test system',
    in: 2,
    low: 1,
    medium: 2
  },
  {
    testTargetname: 'Test app',
    in: 2,
    low: 1,
    medium: 0
  }
]

const newList = list.flatMap((currentItem) => {
  const targetKey = 'testTargetname'
  return Object.entries(currentItem)
    .filter(([key]) => key !== targetKey)
    .map((item) => {
      const obj = Object.fromEntries([item])
      return {
        ...obj,
        [targetKey]: currentItem[targetKey]
      }
    })
})

console.log(newList)

Just a heads up, this example demonstrates how it can be mapped to the correct structure. If you need to filter specific values, you can simply use the filter function at the end.

Changing Array Object into a different Array Object (with Angular)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a similar alternative to {useLocation} provided by 'react-router-dom' that can be used in Next.js?

How to iterate through properties declared in an Interface in Angular 12?

Validation of AngularJS dropdown selection must be completed before submitting the form

Troubleshooting a jQuery filter function selector issue

Retrieve data from a text file using ajax and then return the string to an HTML document

"Endowed with improper dimensions, the BootStrap collapse feature

Exploring the Inner Workings of a React ES6 Class Component

Unable to retrieve options from a particular select box

Is it possible to send React props to the next/image within a component?

"Encountered an error while trying to locate the view" in a simple Express.js application

The program encountered an issue trying to change a string into a float value

Express router parameter matching

Continue perusing the Angular JS HTTP request

Sending an Array of Data to Jquery

"Retrieve a list of all routes that have been registered in Node.js

Launching Angular Application on Amazon Web Services S3 or EC2

What could be causing my items to appear twice and as blank elements?

Update the appearance of a cell if the value within it is equal to zero

How can I implement a view counter feature in a Vue application?

Dynamically loading classes in TypeScript without using default export