Angular 2: Converting JSON data into an array

Question

Angular 2: Converting JSON data into an array

I am working with JSON data that contains vendor fields and I need to extract unique vendors into an array. Can someone provide guidance on how to achieve this in an Angular2 component?

Here is the sample data:

[{"category": "Living Room", "vendor": "Flexsteel"},
{"category": "Living Room", "vendor": "Klaussner"},
{"category": "Living Room", "vendor": "Flexsteel"},
{"category": "Living Room", "vendor": "Craftmaster"},
{"category": "Living Room", "vendor": "Craftmaster"}]

I would like the resulting array to display only the unique vendors:

[{"vendor": "Flexsteel"},
{"vendor": "Klaussner"},
{"vendor": "Craftmaster"}]

angular typescript

Answer 1

Answer №1

Give this a shot:

const info = [...data here...];

const suppliers = info.map(d => {
  return { supplier: d.supplier };
});

Answer 2

Give this a shot:

const info = [...data here...];

const suppliers = info.map(d => {
  return { supplier: d.supplier };
});

Answer 3

Answer №2

An efficient way to achieve this is by using the Array.map method:

let products = [
        {"category": "Bedroom", "vendor": "Ashley Furniture"},
        {"category": "Bedroom", "vendor": "IKEA"},
        {"category": "Bedroom", "vendor": "Rooms To Go"},
        {"category": "Bedroom", "vendor": "Bob's Discount Furniture"}
      ];
let processedProducts = products.map(product => ({ vendor: product.vendor }));

Answer 4

An efficient way to achieve this is by using the Array.map method:

let products = [
        {"category": "Bedroom", "vendor": "Ashley Furniture"},
        {"category": "Bedroom", "vendor": "IKEA"},
        {"category": "Bedroom", "vendor": "Rooms To Go"},
        {"category": "Bedroom", "vendor": "Bob's Discount Furniture"}
      ];
let processedProducts = products.map(product => ({ vendor: product.vendor }));

Answer 5

Answer №3

To start, you will first need to acquire the vendors. Here is an example of how you can do this:

let data = [{"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Klaussner"},
            {"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Craftmaster"}];

// Extract all the vendors 
let vendors = data.map(dat => ({ vendor: dat.vendor }));

Next, you must filter the vendors list to obtain only unique vendors by utilizing the following code snippet:

// Unique Vendors 
let uniqueVendors= Array.from(new Set(vendors.map((x) => JSON.stringify(x))))
                                             .map((y) => JSON.parse(y.toString()));

Here is the complete code snippet for reference:

let data = [{"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Klaussner"},
            {"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Craftmaster"}];

// Get all the vendors 
let vendors = data.map(dat => ({ vendor: dat.vendor }));

let uniqueVendors= Array.from(new Set(vendors.map((x) => JSON.stringify(x))))
                                             .map((y) => JSON.parse(y.toString()));
                                             
console.log(uniqueVendors)

Answer 6

To start, you will first need to acquire the vendors. Here is an example of how you can do this:

let data = [{"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Klaussner"},
            {"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Craftmaster"}];

// Extract all the vendors 
let vendors = data.map(dat => ({ vendor: dat.vendor }));

Next, you must filter the vendors list to obtain only unique vendors by utilizing the following code snippet:

// Unique Vendors 
let uniqueVendors= Array.from(new Set(vendors.map((x) => JSON.stringify(x))))
                                             .map((y) => JSON.parse(y.toString()));

Here is the complete code snippet for reference:

let data = [{"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Klaussner"},
            {"category": "Living Room", "vendor": "Flexsteel"},
            {"category": "Living Room", "vendor": "Craftmaster"}];

// Get all the vendors 
let vendors = data.map(dat => ({ vendor: dat.vendor }));

let uniqueVendors= Array.from(new Set(vendors.map((x) => JSON.stringify(x))))
                                             .map((y) => JSON.parse(y.toString()));
                                             
console.log(uniqueVendors)

Angular 2: Converting JSON data into an array

Answer №1

Answer №2

Answer №3

Similar questions

"Obtaining the document object within an Angular component: A step-by

Tips for detecting the end of a scroll view in a list view

The specified argument, 'void', cannot be assigned to a parameter that expects 'SetStateAction | undefined'

Managing state in a large Angular application can be quite challenging

OneGraph and Graphql Codegen produce enums with numerical representations

Using ES6 import with the 'request' npm module: A Step-by-Step Guide

Component with a dynamic CSS file implementation

TypeError: Unable to find TextEncoder in mongoose and jest when using TypeScript

Obtain the filter criteria within the user interface of a Kendo grid

When using the .concat method on an array, props may display as unidentified

Switching a parameter from a string to an object will cause Elasticsearch to be unable to properly index the new data structure

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal

The TypeScript compilation failed for the Next.js module

The issue of HTTP parameters not being appended to the GET request was discovered

Convert a TypeScript array of strings to a boolean array: a step-by-step guide

Unusual output from the new Date() function: it displays the upcoming month

Following a docker run command, Docker undergoes an automatic shutdown process

What are the methods to determine the cause of ESLint's slow performance?

What is the best way to inject a service instance into the implementation of an abstract method?

typescript, generate a new type by merging option values