A method to extract a specific JSON key value from a nested JSON structure in Angular using a given parameter

I am completely new to Angular and have a json file that contains different families. I need to retrieve the value associated with a specific family based on user input. For example, if the user inputs 'ciena', I should be able to return the json data for ciena only. The challenge is that I cannot rely on fixed positions like [0] due to uncertain user inputs.

import * as familyNames from '../../../assets/jsonFiles/deviceFamilyList.json';

---> this.families = familyNames['families'][0]; --this approach won't work for me.

{
    "families": [
        {
            "**ciena**" : [
                {"name": "Waveserver Family"},
                {"name": "6500 Family"},
                {"name": "5400 Family"},
                {"name": "Z-Series"},
                {"name": "3000 Family"},
                {"name": "5000 Family"},
                {"name": "6500 PTS"},
                {"name": "8180"},
                {"name": "8700"},
                {"name": "Pluggable Transceiver Family"}
            ]
        },
        {
            "**huawei**": []
        }
    ]
}

Can anyone suggest how I can access the json data for a particular family, such as ciena or huawei, from the json file in my .ts file? I am working with Angular 8.

Thank you in advance for your assistance! :)

Answer №1

To get the desired result, follow these steps:

let searchVariable = '**huawei**';
const object = this.familyNames.families
                .filter(item => Object.keys(item).find(key => key === searchVar));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering how to properly run tests on a function within an if statement using Jasmin, Karma

I've recently started unit testing and I'm facing an issue with my component. The component calls a service to display a list of students. getListStudents() { this.noteService.getStudents({}).subscribe(res => { this.students= res })} Then ...

Using npm to pipe Node's output as nicely formatted JSON to the terminal

Is there a way to prettify the JSON output data from running npm run start? Sometimes the output is text and sometimes it's JSON, causing issues with using jq. For example: [nodemon] 1.19.4 [nodemon] to restart at any time, enter `rs` [nodemon] watch ...

Storing multilingual JSON data in AngularJS for faster access

I have successfully implemented a multi-language concept in my application, but I am facing an issue where the language (.json) file is being loaded for every field. As a result, the application takes a longer time to load. My requirement is to load the .j ...

Angular model remains static when incorporated within the document.addEventListener() attribute

Can anyone help me figure out why my attempt to update the model name this.name on click inside document.getElementById('source-selection').addEventListener is not working? Surprisingly, a simple alert within that function does trigger successful ...

Suggestions for managing the window authentication popup in Protractor when working with Cucumber and TypeScript?

I'm a beginner with Protractor and I'm working on a script that needs to handle a window authentication pop-up when clicking on an element. I need to pass my user id and password to access the web page. Can someone guide me on how to handle this ...

How to access a value from a for-loop in JavaScript beyond its scope

Hello there! Within nested json-files, I have been utilizing the following function for iteration: function organizePeopleGroups(People, container, parentObject) { _.each(People, function (item, index) { var peopleGuid =[]; for (var p ...

Parsing JSON with Jackson can handle property names containing dots

Is it possible to use @JsonProperty to specify a property name with dots? import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import com.fasterxml.jackson.annotation.JsonProperty; @JsonIgnoreProperties(ignoreUnknown = true) public class Compare ...

Separating React props based on multiple Typescript interfaces

Is there a way to split the props object in React based on an Typescript interface that extends multiple other interfaces? Alternatively, I could duplicate the props and pass them to components that don't need them, but that would not be the most effi ...

How can I programmatically close an Angular Material mat-select multiselect by clicking a button?

Is there a way to create a multi-select dropdown menu using Angular Material and mat-select where the user clicks an "apply" button within the dropdown to close the menu? I have attempted adding a close method to the button, but it is resulting in several ...

Items added to localStorage will not be able to store objects that have keys with array values

There seems to be an issue with how localStorage.setItem stores object values when the object contains keys with array values. var obj = data : { cachedat : ['1' , 2 , 3] }; localStorage.setItem('data' , JSON.stringify(obj) ); However, ...

Avoid using the Input formControlName in the Angular 6 form

Before submitting the form, I want to be able to retrieve the value of the input tag with formControlName. I have tried creating a method to accomplish this, but I am unable to access the current input value. When I removed the formControlName to exclude ...

Parsing data with json_decode from the Instagram API is exceptionally sluggish

I'm retrieving data from our company's Instagram feed to display the latest 3 posts on our website using an Instagram widget. After troubleshooting, it seems that the issue lies with the json_decode function when decoding the raw data. Here is ...

How to create a separate modal component in Angular without relying on ng-modal

I am facing an issue with ComponentB, which contains HTML code for a Bootstrap modal. I want to open ComponentB from ComponentA. Although the component is getting loaded when inspected, the popup modal does not appear on the UI. <app-root> <ap ...

The symbol for ampersand and the symbol for number sign (& and #)

Special characters like ampersands and number signs are not being stored in my MS SQL database when I insert data. It seems to truncate the word after the ampersand or number sign. I am using an NVARCHAR column on MS SQL Server 2014. For instance, if I in ...

Guide to deactivating validation in Plumier

I'm currently facing a challenge that requires me to perform manual validation within the controller. I've searched through the documentation but couldn't find any instructions on how to disable automatic validation. Is there a workaround av ...

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

I am currently working on an angular 6 application where users are assigned different roles that require distinct styling. Role 1 uses Stylesheet 1, while Role 2 uses Stylesheet 2. The Navbar component is a crucial part of the overall layout structure of ...

Oops! An issue occurred while trying to compile the file constructor.d.ts in the common-behaviors folder of @angular/material/core. The error message received was: "error TS1005: ';'

Switching from Bootstrap to Angular Material caused an unexpected error when trying to run ng serve: Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected. The errors encountered include: ...

Sending and storing data through URLs with Retrofit and Django Rest Framework

I'm currently developing an Android Application and my objective is to have full control over the user management process (adding, updating, deleting, displaying). I am utilizing Retrofit Client along with Django-Rest-Framework for this purpose. All t ...

The integration of Angular 6 with AngularJS components fails to load properly in a hybrid application

Currently, I am in the process of upgrading a large AngularJS version 1.7.3 to a hybrid app using Angular 6. The initial phase involved converting all controllers/directives into an AngularJS component. Subsequently, I created a new Angular 6 project skele ...

Comparison: Sending Parcelable Objects vs Sending JSON Strings through Android Intents

I have been considering different approaches to pass data between activities in my program. One method involves converting a POJO class into a Json String and passing it through a bundle (Method1). METHOD1 String jsonString = JacksonSingleton.getObjectMap ...