Combining sub-array into main property

Question

Combining sub-array into main property

After organizing my data, I am looking to convert it into a flat structure

data = [
   {
      "Name":"Gorba Technology",
      "Product":"Dell",
      "City":[
         "Delhi",
         "Mumbai"
      ]
   },
   {
      "Name":"Suvidha Computer",
      "Product":"Lenovo",
      "City":[
         "Deoghar"
      ]
   },
   {
      "Name":"Sara Laptop",
      "Product":"Dell",
      "City":[
         "Noida",
         "Delhi"
      ]
   }
]

The desired output should look like this:

[{"Name":"Gorba Technology","City":"Delhi"},
{"Name":"Gorba Technology","City":"Mumbai"},
{"Name":"Suvidha Computer","City":"Deoghar"},
{"Name":"Sara Laptop","City":"Rajasthan"}
{"Name":"Sara Laptop","City":"Delhi"}]

I attempted the following approach but was unsuccessful:

var result = data.map(({Name, City}) => City.map(item => {Name, item}));

In an attempt to achieve the desired output without using flatMap, I encountered lint errors when trying to implement flatMap.

typescript

Answer 1

Answer №1

To optimize your code, consider using the reduce function instead of map

data.reduce((acc, {Name, City}) => {
  City.each((city) => {
    acc.push({Name, City: city});
  });
  return acc;
}, []);

Answer 2

To optimize your code, consider using the reduce function instead of map

data.reduce((acc, {Name, City}) => {
  City.each((city) => {
    acc.push({Name, City: city});
  });
  return acc;
}, []);

Answer 3

Answer №2

map() function always produces an output array of the same length as the input array, which may not meet your specific requirements.

An alternative approach could involve utilizing reduce() and forEach().

In the provided example JSON data, there is a destructure operation where multiple objects are created for each city associated with the same company name:

const data = [
   {
      "Name":"Gorba Technology",
      "Product":"Dell",
      "City":[
         "Delhi",
         "Mumbai"
      ]
   },
   {
      "Name":"Suvidha Computer",
      "Product":"Lenovo",
      "City":[
         "Deoghar"
      ]
   },
   {
      "Name":"Sara Laptop",
      "Product":"Dell",
      "City":[
         "Noida",
         "Delhi"
      ]
   }
]

var result = data.reduce((acc,{Name,City}) => { 
  const items = [];
  City.forEach(city=> {
  items.push({Name , City : city});
  });
  return [...acc,...items];
},[]);

console.log(result);

Answer 4

map() function always produces an output array of the same length as the input array, which may not meet your specific requirements.

An alternative approach could involve utilizing reduce() and forEach().

In the provided example JSON data, there is a destructure operation where multiple objects are created for each city associated with the same company name:

const data = [
   {
      "Name":"Gorba Technology",
      "Product":"Dell",
      "City":[
         "Delhi",
         "Mumbai"
      ]
   },
   {
      "Name":"Suvidha Computer",
      "Product":"Lenovo",
      "City":[
         "Deoghar"
      ]
   },
   {
      "Name":"Sara Laptop",
      "Product":"Dell",
      "City":[
         "Noida",
         "Delhi"
      ]
   }
]

var result = data.reduce((acc,{Name,City}) => { 
  const items = [];
  City.forEach(city=> {
  items.push({Name , City : city});
  });
  return [...acc,...items];
},[]);

console.log(result);

Answer 5

Answer №3

const info = [
   {
      "Name":"Tech Pros",
      "Product":"HP",
      "City":[
         "New York",
         "Los Angeles"
      ]
   },
   {
      "Name":"PC World",
      "Product":"Asus",
      "City":[
         "Chicago"
      ]
   },
   {
      "Name":"Electro Gadgets",
      "Product":"Apple",
      "City":[
         "San Francisco",
         "Seattle"
      ]
   }
];

const updatedInfo = [];

info.forEach(item => {
  if (item?.City?.length) {
    item.City.forEach(city => {
      const newObj = {...item, City: city};
      updatedInfo.push(newObj);
    })
  }
});

console.log(updatedInfo);

Answer 6

const info = [
   {
      "Name":"Tech Pros",
      "Product":"HP",
      "City":[
         "New York",
         "Los Angeles"
      ]
   },
   {
      "Name":"PC World",
      "Product":"Asus",
      "City":[
         "Chicago"
      ]
   },
   {
      "Name":"Electro Gadgets",
      "Product":"Apple",
      "City":[
         "San Francisco",
         "Seattle"
      ]
   }
];

const updatedInfo = [];

info.forEach(item => {
  if (item?.City?.length) {
    item.City.forEach(city => {
      const newObj = {...item, City: city};
      updatedInfo.push(newObj);
    })
  }
});

console.log(updatedInfo);

Combining sub-array into main property

Answer №1

Answer №2

Answer №3

Similar questions

Strange problem encountered when transferring data to and from API using Typescript and Prisma

Dynamic tag names can be utilized with ref in TypeScript

Anchor text in Primeng using p-radioButton

Creating an object type that accommodates the properties of all union type objects, while the values are intersections, involves a unique approach

How can a TypeScript Angular directive utilize a function?

unable to retrieve getters within the store module

If I don't utilize dependency injection in Angular, it prompts me for arguments

ReactJS Error: The property 'hubConnection' is not defined on type 'JQueryStatic'

How can we ensure a generic async function with a return type that is also generic in Typescript?

The return type of Array.find is accurate, however, it contains an error

When an import is included, a Typescript self-executing function will fail to run

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

Enforcing strict type checking in TypeScript with noImplicitAny for undeclared variables

When hosting on render.com, the session data is not retained when redirecting to other routes

Implementing the strictNullCheck flag with msbuild

Angular Owl Carousel doesn't slide horizontally, it slides vertically

How can you initialize Boostrap components or Materialize css in Angular 5 without using any external libraries?

React Redux not properly handling text input updates when onChange event is triggered

Import reactjs modules without the need for Browserify, Webpack, or Babel

What is the best way to include UMD in a browser using the <script type="module"> tag, while also importing