Is there a way to modify a single object within an array?

Here is the HTML representation of my data:

page.html

<ul id="elements">
          <li *ngFor="let elem of fetchdata" (click)="log(elem)">
              {{elem.title}} {{elem.description}}
          </li>
      </ul>

page.ts This is where I retrieve data from local storage.

My goal is to update the title element of the clicked object in the array when I click on it,

//ARRAY STRUCTURE JUST FOR YOUR NEED
    //[{title:"saurabh" , description:"dd" , tagline:"tt", date:"dd"}];

this.fetchdata = JSON.parse(localStorage.getItem('education'));

  log(elem,index) { 
    console.log(elem); 
    console.log(index);

//WHEN I CLICK, I WANT THE TITLE TO BE UPDATED TO "CLICKED", REST ALL PROPERTIES TO REMAIN SAME

//ARRAY STRUCTURE JUST FOR YOUR NEED
//[{title:"saurabh" , description:"dd" , tagline:"tt", date:"dd"}];

    localStorage.setItem("education",JSON.stringify(this.fetchdata));
  }

Answer №1

To retrieve the title of the elem object, you can use the following code snippet:

printTitle(elem,index) { 
    console.log(elem.title); 
}

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

Nested ControlGroup in Angular2's ControlArray

I've hit a roadblock trying to iterate through a ControlArray that has Controlgroups in a template. In TypeScript, I successfully created the ControlArray and added some ControlGroups by looping over data fetched from an API. The console displays the ...

Exploring the capabilities of Typescript arrays by implementing a forEach loop in conjunction with the

I possess an array: set Array ( [0] => Array ( [name0] => J [name1] => L [name2] => C ) [1] => Array ( [data0] => 3,1,3 [data1] => 5,3 ...

How can I display options in a react autocomplete feature?

Using the autocomplete component from @material-ui/lab/autocomplete, I am trying to retrieve the title_display result in the options field. These results are being fetched from an API using axios. You can view my code here--> https://codesandbox.io/s/r ...

Establishing an efficient development environment with continuous integration for react-native using typescript and nodejs

Unfortunately, we encounter the challenge of working with different nodejs versions in our projects. I am unsure if this is similar to Java where multiple jdks can be installed (multiple nodejs installations), and each project automatically utilizes the co ...

Attempting to start an Angular project using NG NEW constantly fails nowadays - always ends with error code EPERM

Can Angular still be considered a reliable framework when pervasive errors and bugs persist for extended periods without any clear resolution documented? .... 24695 silly saveTree | +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

What could be the reason for React not memoizing this callback?

I am encountering an issue with my Next.js project where the _app.tsx file contains the following code: const Root = ({ Component, pageProps }) => { ... const handleHistoryChange = useCallback((url) => { console.log({ url }); }, []); u ...

Retrieve the data from multiple forms effortlessly with a single click

I'm currently working on getting the results for multiple forms simultaneously. I have a structure in place to retrieve the result one by one, but now I need to send the results of all of them together. Here is my HTML code snippet: <form (ngSubmi ...

Issue with PrimeNG dropdown where selected option gets reset when bound to interface property

Here is how I have implemented the p-dropdown: <p-dropdown name="taxOptions" [options]="taxOptions" [(ngModel)]="purchaseInvoiceDetail.tax"></p-dropdown> The values for the taxOptions property are set like this: this.taxOptions = [ { l ...

Setting up data in Firebase can be challenging due to its complex structure definition

https://i.stack.imgur.com/iclx7.png UPDATE: In my firebase structure, I have made edits to the users collection by adding a special list called ListaFavorite. This list will contain all the favorite items that users add during their session. The issue I a ...

How can we combine two phone calls and display the outcomes using typeahead ngx-bootstrap?

Let me walk you through the code that is currently working: <input [formControl]="search" [typeahead]="suggestions" typeaheadOptionField="name" (typeaheadOnSelect)="onSelectedDriver($event)&qu ...

After logging in, the query parameters (specifically code and state) are still present

After logging into my SPA, the query parameters code and state are not removed from the URL. This causes an issue when refreshing the page because the login flow attempts to use the parameters in the URL again. For example, here is the URL after logging in ...

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

Testing the functionality of an event through unit test cases

I'm currently working on writing unit test cases for the function shown below: selected (event:any) { let selectedValue = event.target.value.substring(0,3); this.seletedBatch = selectedValue; this.enableSubmitButton = true } My test cases are a ...

Struggling to transfer array data from service to component

I am currently working on passing an array from service.ts to a component. My goal is to display the array elements in a dialog box. However, I encountered a Typescript error TypeError: Cannot read property 'departmentArr' of undefined. I am str ...

Guide to creating numerous separate subscriptions in angular 6

Can you explain the differences between flatMap(), switchmap(), and pipe()? Which one would be most suitable for the given scenario? I need to call the next method once both responses are received. this.jobService.getEditableText('admins', compar ...

What is the best way to integrate properties subsets into your classes?

In my code, I am working with 3 classes ... class1 { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; this.toClass2 = function() { // TODO: return this as an instance of class2; // the conversion would remove the un ...

aiplafrom struggles to establish a customer using Vite alongside Vue and TypeScript

I'm currently experimenting with Gemini Pro on Vite + Vue + TS, but I encountered an issue when attempting to create an instance of PredictionServiceClient. The error message displayed is Uncaught TypeError: Class extends value undefined is not a cons ...

Sticky header in React data grid

Is there a way to implement a sticky header for a data grid in react? I have tried various methods but haven't been able to figure it out. Any suggestions would be appreciated. You can find my code sandbox example here. #react code export const Styl ...

Confirm that the input field in Angular 5 has a default value before proceeding with validation

My form contains an input field with a default value. I am looking to add validation to ensure that the field has exactly 5 characters. <td> <input type="text" maxlength="5" ngModel #number="ngModel" name="number" value="{{data.number}}" ...

Enhance Angular's User Interface using the Express Backend

I am a beginner in the MEAN stack development. I have set up an express server (api) that listens at a specific URL and handles incoming data. My goal is to create a frontend for this API where I can send and display incoming data, logs, and current proc ...