Obtaining an array from within an object in Angular 2 using Typescript

Question

Obtaining an array from within an object in Angular 2 using Typescript

Upon performing a console.log of the following:

console.log(this.categories);

The resulting structure is displayed below:

https://i.sstatic.net/8Wt65.jpg

This structure was generated from the JSON retrieved from the API:

[
  {
  "id":"dff0bb3e-889f-43e6-b955-52cc7203952f",
  "name":"Wood",
  "category_types":[
     {
        "id":"49b31f43-d98d-43c8-9798-088ec6914fe5",
        "name":"Solid"
     },
     {
        "id":"8592716a-ffd5-4e97-ba9e-6a64ba6e48f1",
        "name":"Engineered"
     }
  ]
  },
  {
  "id":"6b2b6914-6c64-4389-a327-be3f08fd066d",
  "name":"Carpet",
  "category_types":[
     {
        "id":"0e2c8473-90fb-4806-a6e7-2389eeb0f9e4",
        "name":"Loop pile"
     },
     {
        "id":"3c762653-4f0d-42d2-a84e-133c7051c95b",
        "name":"Cut pile"
     },
     {
        "id":"0997d4dc-e886-46ef-83b4-d90c4fb72553",
        "name":"Cut \u0026 loop pile"
     }
  ]
  }
]

If I have the value 'Wood' stored in a string variable named value, how can I access the category_types array for the Wood object?

console.log(this.categories[value]);

The output returns as undefined.

javascript json angular object typescript

Answer 1

Answer №1

If you are searching for an item named 'Wood' and need to retrieve its category_types, you can utilize the Array.prototype.find method. This function will return the first matching value based on the condition specified in the test function. In your scenario, the code snippet would resemble this:

this.categories.find(value => value.name === 'Wood').category_types

Answer 2

If you are searching for an item named 'Wood' and need to retrieve its category_types, you can utilize the Array.prototype.find method. This function will return the first matching value based on the condition specified in the test function. In your scenario, the code snippet would resemble this:

this.categories.find(value => value.name === 'Wood').category_types

Answer 3

Answer №2

To filter out categories with the name "Wood", you can utilize the Array.filter method:

const filteredCategories = this.categories.filter(category => {
  return category.name === "Wood";
});
const woodCategory = filteredCategories.length > 0 ? filteredCategories[0] : undefined;

This code snippet will effectively extract categories named "Wood" from your array of categories. If no matching category is found, the variable woodCategory will be assigned a value of undefined.

Answer 4

To filter out categories with the name "Wood", you can utilize the Array.filter method:

const filteredCategories = this.categories.filter(category => {
  return category.name === "Wood";
});
const woodCategory = filteredCategories.length > 0 ? filteredCategories[0] : undefined;

This code snippet will effectively extract categories named "Wood" from your array of categories. If no matching category is found, the variable woodCategory will be assigned a value of undefined.

Obtaining an array from within an object in Angular 2 using Typescript

Answer №1

Answer №2

Similar questions

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

Enumerators of JSON data

Choosing and Duplicating Text in Angular

Tips for storing and retrieving high scores in a JavaScript game

Is it possible for a function parameter to utilize an array method?

Google Script: How to automatically open a newly created text document after its creation

Combining two JSON files and reconstructing the JSON using jq

Clicking on an Angular routerLink that points to the current route does not function unless the page is re

Warning from Material-UI Autocomplete: Always remember to use the `getOptionSelected` prop in order to tailor the equality test

Enhance a portion of your text with some flair

Verifying completed fields before submitting

Display and conceal various elements in Vue.js using a data list

Generating a Json Array using SQL data in C#

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

JQuery is displaying the word "undefined" instead of the expected JSON array values

I'm facing an issue where the data I retrieved is not displaying properly in my template within nuxt 3

Error Encountered when Attempting to Retry AI SDK on Vercel's

What is the significance of Fawn's statement, "Invalid Condition"?

Angular Selectable Drop-down Menu

Scala string: Unescaping made easy