Discovering an array containing a specific value and transforming it to another array in Angular 8

I have an array called this.data which contains a list of platforms. Each platform has its own set of section lists, where a section list consists of values like sectionName, sectionid, and sectionVal.

Now, my goal is to replace the old sectionList with a new one (stored in this.newSectionList) for a specific sectionid within a platform.

Currently, I am able to update each individual value within the sectionList using the following code:

this.data.platforms.find(a => a.platformId === platformId).sectionList.find(f => f.sectionid === this.sectionid).sectionName = this.newSectionList.sectionName;

this.data.platforms.find(a => a.platformId === platformId).sectionList.find(f => f.sectionid === this.sectionid).sectionVal = this.newSectionList.sectionVal;

However, what I really want to achieve is to completely replace the entire sectionList with this.newSectionList. What is the simplest way to do this?

The syntax below is incorrect, but how can I modify it to make it work as intended?

this.data.platforms.find(a => a.platformId === platformId).sectionList.find(f => f.sectionid === this.sectionid) = this.newSectionList;
angulartypescriptangular8

Answer №1

My preferred method is to approach things step by step. The crucial element here is leveraging the spread operator to provide all properties to the specified section.

const platformInfo = this.data.platforms.find(item => item.platformId === platformId)
const selectedSection = platformInfo ?
        platformInfo.sectionList.find(subitem => subitem.sectionid === this.sectionid) : null

if (selectedSection)
   selectedSection = { ...newSection }
else
   platformInfo.sectionList.push(newSection)

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

Does Typescript not provide typecasting for webviews?

Typescript in my project does not recognize webviews. An example is: const webview = <webview> document.getElementById("foo"); An error is thrown saying "cannot find name 'webview'". How can I fix this issue? It works fine with just javas ...

javascripttypescriptwebviewelectron

Issue encountered when importing a font in TypeScript due to an error in the link tag's crossorigin

How do I troubleshoot a TypeScript error when importing a custom font, such as a Google font? <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> Below is the specific error message: Type 'boolean' is ...

typescriptfontsnext.js

Retrieve the interface property following the execution of the HTTP GET service

Having trouble accessing the array properties from my JSON file using the http get service. The goal is to display the Widget array on the web. service.ts: import { Http, Response, Headers } from '@angular/http'; import { Observable } from &apo ...

jsonangularhttpservice

Protractor Browser Instance Failure

We have encountered an issue with our UI suite failing in Chrome during the login process. Initially, we thought it might be due to upgrading to Chrome 79, as the problems arose simultaneously. Interestingly, the login functionality still works smoothly in ...

typescriptgoogle-chromeselenium-webdriverprotractor

Nested forwardRef in React is a powerful feature that allows

Within my React application, specifically utilizing typescript, I have implemented a form using react-hook-form to handle all the necessary logic. Afterwards, I proceeded to customize the select element with various CSS and additional features. To simplif ...

reactjstypescriptreact-hooksreact-hook-form

Instead of tapping the enter key, try searching by keying up

I am implementing a search pipe in Angular for filtering data based on user input import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchPipe', pure: false }) export class SearchPipe implements PipeTransform { ...

angular

Is there a way for me to retrieve the callback parameters?

Can the parameters of the callback function be accessed within the 'outer' function? function f(callback: (par1: string)=>void): void { // Is it possible to access 'par1' here? } ...

typescript

Encountering an error in resolving symbol values statically within the Angular module

Following a helpful guide, I have created the module below: @NgModule({ // ... }) export class MatchMediaModule { private static forRootHasAlreadyBeenCalled: boolean = false; // This method ensures that the providers of the feature module ar ...

javascriptangularangular-module

Can Cloud Functions be used to establish a connection between Cloud Firestore and Realtime Database?

My current project involves designing my firebase database with a unique approach. I am looking to establish a connection between certain document fields in firestore and real-time database fields. This way, any changes made in the real-time database will ...

typescriptfirebasefirebase-realtime-databasegoogle-cloud-firestoregoogle-cloud-functions

What is the definition of reusable components within the context of Angular, React, and Vue?

I've been hearing a lot about reusable components. What does this actually mean? For instance, if I want to showcase basic user information like ID, name, age, etc. Does it imply that the component is "plug and play," where you simply write the sele ...

angularreactjsvue.js

My goal is to access data from an array that is stored in MySQL, with the data containing latitude and longitude values

I need to extract latitude and longitude values separately from a Laravel5 database. $vehiclelocation=Vehicle::select('veh_last_location')->get()->toArray(); dd($vehiclelocation[0]['veh_last_location']); The response I am curren ...

mysqlangular

Tips for ensuring confidential communication between clients and servers

My project utilizes AngularJS on the client-side and Express JS on the server-side for data communication using the http post method. Currently, when a http request is sent, the server responds with JSON data that gets displayed in the client browser. I wa ...

jsonnode.jsexpressangular

Incorporating Common Types for Multiple Uses

Is there a way to efficiently store and reuse typings for multiple React components that share the same props? Consider the following: before: import * as React from 'react'; interface AnotherButtonProps { disabled?: boolean; onClick: (ev ...

javascriptreactjstypescript

Angular CORS Policy

I encountered an issue when trying to send an authorization header JWT token from Angular. The error message reads: Access to XMLHttpRequest at 'http://localhost:52278/api/user/signup' from origin 'http://localhost:4200' has been blocke ...

angularasp.net-core

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

My basic component includes the following code snippet: import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; export interface Props { }; @withRouter export default class Movies extends R ...

javascripttypescript

Error: the attempt to execute the mongoose connection function has failed due to it not being recognized as a valid function

Hey there, I'm encountering the error TypeError: mongoose__WEBPACK_IMPORTED_MODULE_15___default.a.connect is not a function import mongoose from "mongoose"; const dbURI = 'myurlstuffhere'; mongoose.connect(dbURI , {useNewUrlParser: ...

typescriptmongoose

updating the model value in AngularJS2 when the input value is modified

Looking to update a model's value based on user input without relying on the blur event. Unsure of the best approach for this task. Below is the code snippet I have attempted: <div *ngFor='let l of list'> <input #temp [value]= ...

angularjsangular

Struggling to locate the unique identifier for a name within a JSON object

In my current Angular project, I am encountering an issue with storing the ID of a name in a variable. For example: [ {ttypeName: Cricket , ttypeUid: 1}, {ttypeName: Hockey, ttypeUid: 2}, {ttypeName: nba, ttypeUid: 3}, {ttypeName: football, ttypeUid:4}, ...

angularionic-frameworkangular5angular6angular-services

Encountering a ReferrenceError when utilizing jQuery with TypeScript

After transitioning from using JavaScript to TypeScript, I found myself reluctant to abandon jQuery. In my search for guidance on how to integrate the two, I came across several informative websites. Working with Visual Studio 2012, here is my initial atte ...

javascripttypescript

How to leverage async/await within loops in Node.js for optimized performance and efficiency

Hey there, I'm working on my nodejs api where I need to fetch data inside a loop and then perform another loop to save data in a different table. Can anyone guide me on how to achieve this? Below is a snippet of what I have attempted so far without su ...

javascriptnode.jstypescriptloopsasync-await