Extracting data from an array using Angular

Currently, I am developing an Angular application that involves handling an array structured like the one below.

[
    { 
     Code: "123",
     Details:[
       {
        Id: "1",
        Name: "Gary"
       },
       {
        Id: "2",
        Name: "Rocky"
       }]
    },
    { 
     Code: "456",
     Details:[
       {
        Id: "3",
        Name: "Cindy"
       },
       {
        Id: "4",
        Name: "Jacky"
       }]
    }
]

This array can have multiple elements, each containing a unique Code value and an array of Details (which can vary in length). The Details array consists of Id and Name pairs. In my scenario, I receive an Id from query parameters and need to cross-reference it within the Details arrays to retrieve the corresponding Code value. For instance, if the Id from the query parameter is 4, then I should return the Code value 456. Similarly, for an Id value of 2, I should fetch the Code value 123. How can this be achieved effectively?

javascriptangulartypescriptangular8

Answer №1

If the original poster is working with an array of objects, there is a way to find a specific detail using a combination of Array.prototype.find and Array.prototype.some functions.

To extract the property Code, one can utilize destructuring assignment in JavaScript.

let arr = [{
  Code: "123",
  Details: [{
    Id: "1",
    Name: "Gary"
  }, {
    Id: "2",
    Name: "Rocky"
  }]
}, {
  Code: "456",
  Details: [{
    Id: "3",
    Name: "Cindy"
  }, {
    Id: "4",
    Name: "Jacky"
  }]
}];
let { Code } = arr.find(({ Details }) =>
Details.some(({ Id }) => Id === "4")) || {}; //In case no match is found, undefined will be assigned

console.log(Code);

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

Three.js experiencing issues with FBX animations running erratically

Having trouble with animations on some fbx models. When an animation lasts 20 seconds, the model remains stationary for 19 seconds and then suddenly moves within the last second or so. However, other fbx models animate correctly. The code used to run the a ...

javascriptthree.jsfbx

What could be the reason for the malfunction of my callback function?

This particular function is executed with the command node server const express = require("express"); const app = express(); const fs = require("fs"); const connectDb = require("./config/db"); const __init__ = (local = false) => { fs.writeFile( ...

javascriptnode.js

Error message: WebStorm shows that the argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type<any> | "root" | null} and InjectableProvider

Transitioning my app from Angular v5 to v6 has presented me with a TypeScript error when trying to define providedIn in my providers. The argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type | "root" | null} & ...

angulartypescriptwebstormangular6

In Vue3, using the script setup feature allows for setting default property values within nested objects

I am developing a component that is designed to accept an object as a prop. In case the object is not provided, I aim to set a default value for it. <script setup lang="ts"> interface LocaleText { text: string; single?: boolean; coun ...

typescriptvue.jsvuejs3vue-composition-apivue-script-setup

Expanding file input fields in Javascript

I am facing an issue with my form and file input. I need to select images from a different folder. echo '<pre>'; var_dump($_FILES); echo '</pre>'; Upon submitting the form, only the last selected image is displayed, but I ...

javascriptphpjqueryfileinput

What is the process for extracting Excel .xlsx information from a POST request body in an Express API?

I've created an Angular frontend application that sends an excel (.xlsx) file as form data in the request body to my Express endpoint. Take a look at the function from my Angular service file below: uploadOrder(workOrder: File) { const formData: For ...

node.jsangulartypescriptapiexpress

How to access a Selenium element using JavaScriptExecutor

My task involves working with a collection of elements in Selenium, specifically located using the By.CssSelector method: var contentRows = new List<TableRow>(); for (var i = 1; i < PositiveInfinity; i++) { var cssSelectorToFind = $"tbody &g ...

javascript.netseleniumselenium-webdriverwebdriver

Learn the step-by-step process of dynamically adding elements to a JavaScript object in JSON structure

We are attempting to dynamically generate a JSON object using a for loop. The intended result should resemble the following: posJSON = [ { "position": [msg[0].Longitude, msg[0].Latitude], "radius": 0.05, "color": [255, 255, 0, ...

javascriptjson

What is the importance of always catching errors in a Promise?

In my project, I have implemented the @typescript-eslint/no-floating-promises rule. This rule highlights code like this - functionReturningPromise() .then(retVal => doSomething(retVal)); The rule suggests adding a catch block for the Promise. While ...

javascripttypescriptpromiseeslinttypescript-eslint

Executing a function every time a prop is updated within the component

I have a prop named transcript in one of my components. Whenever I speak a voice intent, it gets updated. I want to execute a function every time the transcript changes and pass the transcript as an argument. In this code snippet, I attempted to use an On ...

javascripthtmlreactjsonchangereact-props

recording the results of a Node.js program in PHP using exec

I'm attempting to retrieve the output from my node.js script using PHP exec wrapped within an ajax call. I am able to make the call and receive some feedback, but I can't seem to capture the console.log output in the variable. This is how I exec ...

javascriptphpajaxnode.jsexec

Crystal-clear TextField component in Office UI Fabric

Seeking advice on how to clear a masked text field from Office UI Fabric using a button. Does anyone have a solution for this? I attempted to set the value using a state, but unfortunately, it did not work as expected. ...

reactjstypescripttextfieldoffice-ui-fabric

Choose a value, then multiply it by a number using a reactive

I have been attempting to multiply a fixed value by the selected value of a mat-select element, for example A x B, where A remains constant and does not change while B is the changing value from the mat-select. After performing this multiplication, I aim ...

angulartypescript

Using a pipe in multiple modules can lead to either NG6007 (having the same pipe declaration in more than one NgModule) or NG6002 (failing to resolve the pipe to an NgModule

My Pipe is located in apps\administrator\src\app\modules\messenger\pipes\custom-message.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; /** * Pipe for Custom Message for boolean */ @Pipe({ name ...

angulartypescriptmoduleangular-pipe

Is there a way to retrieve a child's parents within an array.filter() callback function even if they were initially filtered out?

Today I stumbled upon the array.filter() method and its accompanying callback function. I have a collection of objects structured like this: var treeAry = [ {"id" : "200", "parent": "#", "type" : "1"}, {"id" : "300", "parent": "#", "type" : " ...

javascriptjqueryarrays

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...

javascriptjqueryhtmlcss

The JQuery function .remove() will not properly remove dynamically added elements

I am facing an issue when trying to remove an element from a page. Every time I click on a button on the page, it adds a div with the following structure: <div class="holder-div" style="position: relative;display: inline-block;"> ...

javascriptjquery

What steps can be taken to provide accurate information in the absence of ImageData?

Utilizing a JS library to convert a raster image into a vector, I encountered an issue where the library returned a fill of solid color instead of the desired outcome. I suspect that the problem lies within the ArrayBuffer. The process of loading an imag ...

javascripthtmlcanvasarraybuffer

The FileSaver application generates a unique file with content that diverges from the original document

I'm attempting to utilize the Blob function to generate a file from information transmitted via a server call, encoded in base64. The initial file is an Excel spreadsheet with a length of 5,507 bytes. After applying base64 encoding (including newlines ...

angulartypescriptbase64filesaver.js

Can you use TypeScript to define generic React functional components?

I am looking to add annotations to a generic in a React functional component like the following: import React, {useEffect, useState} from "react"; interface PaginatedTableProps{ dataFetcher: (pageNumber: number) => Promise<any>, columnNames: ...

javascriptreactjstypescripttypescript-genericsreact-typescript