Incorporate a fresh attribute to the JSON data in an Angular API response

Question

Incorporate a fresh attribute to the JSON data in an Angular API response

I'm currently working on updating my JSON response by adding a new object property.

Below is an example of my initial JSON response:

{
    "products": [{
        "id": 1,
        "name": "xyz"
    }]
}

My goal is to include a new object property called 'show' in the same JSON response:

{
    "products": [{
        "id": 1,
        "name": "xyz",
        "show": false
    }]
}

Here is a snippet of my code implementation:

import {Component,OnInit} from '@angular/core';
    import {Http, Response} from '@angular/http';
    import 'rxjs/Rx';
    @Component({
      templateUrl:'./electronics.html'
    })
    export class electronicsComponent{
      productListElectronics={};
        productListElectronicResponse: Object;
        error:Object;
        constructor(private http: Http) {
          this.productListElectronicResponse={};
            this.error={};
            http.get('../json/electronics/electronics.json').map((res: Response) => res.json()).subscribe(res =>
              {

                for(var i = 0; i <= res['products'].length; i++){
                    res['products'][i].show=false;
                  }
                  console.log(res);
           }, error => this.error = error );
      }
    }

However, I keep encountering the following error message in the console:

ERROR TypeError: Cannot set property 'show' of undefined
    at SafeSubscriber.http.get.map.subscribe._this.error [as _next] (products.component.ts:22)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:238)
    at SafeSubscriber.next (Subscriber.ts:190)
    at Subscriber._next (Subscriber.ts:135)
    at Subscriber.next (Subscriber.ts:95)
    at MapSubscriber._next (map.ts:80)
    at MapSubscriber.Subscriber.next (Subscriber.ts:95)
    at XMLHttpRequest.onLoad (xhr_backend.ts:104)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (ng_zone.ts:253)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460)

javascript angular typescript angular2-services

Answer 1

Answer №1

Here is where you went wrong

 for(let i = 0; i < res['items'].length; i++)

The correct way is as follows

for(let i = 0; i < res['items'].length; i++)

:D

https://example.com/jsfiddle123

Answer 2

Here is where you went wrong

 for(let i = 0; i < res['items'].length; i++)

The correct way is as follows

for(let i = 0; i < res['items'].length; i++)

:D

https://example.com/jsfiddle123

Answer 3

Answer №2

This code snippet demonstrates how to iterate through an array of objects and update a specific property:

for(var index in data['items']){

    data['items'][index].active=true;

}

Fiddle: https://jsfiddle.net/exampleuser/samplecode/

Answer 4

This code snippet demonstrates how to iterate through an array of objects and update a specific property:

for(var index in data['items']){

    data['items'][index].active=true;

}

Fiddle: https://jsfiddle.net/exampleuser/samplecode/

Answer 5

Answer №3

Possibility 1:

To prevent the for loop from running one extra time for an undefined object, remove the = in <=.

for(var i = 0; i < res['products'].length; i++){
    res['products'][i].show=false;
}

If the above solution does not work, try Possibility 2 below.

I have a suspicion that res['products'] is returning a json array.

Run the following code and share your results here:

console.log(res['products'])
for(var i = 0; i < res['products'].length; i++){
    console.log(res['products'][i]);
    res['products'][i].show=false;
}

Answer 6

Possibility 1:

To prevent the for loop from running one extra time for an undefined object, remove the = in <=.

for(var i = 0; i < res['products'].length; i++){
    res['products'][i].show=false;
}

If the above solution does not work, try Possibility 2 below.

I have a suspicion that res['products'] is returning a json array.

Run the following code and share your results here:

console.log(res['products'])
for(var i = 0; i < res['products'].length; i++){
    console.log(res['products'][i]);
    res['products'][i].show=false;
}

Incorporate a fresh attribute to the JSON data in an Angular API response

Answer №1

Answer №2

Answer №3

Similar questions

Does this function only function on a singular div?

Tips for updating state and rendering in a function component in React Native:

The mat-checkbox is failing to accurately reflect its checked state

"How to dynamically fill a text input field from a table using jQuery when a specific value is selected, potentially involving multiple rows (possibly

Defining a structure for an entity in which its attributes distinguish between different data types and an array combination

Reading JSON documents in JavaScript through multiline strings

Is there a function return type that corresponds to the parameter types when the spread operator is used?

New behavior in Vue 3: defineEmits is causing issues with defineProps data

Using the express.Router instance for handling errors can be a useful tool in your development

Are JavaScript Object notation and proper JSON the same thing?

Is there a way to convert a File into a byte array and then save it in a database using Angular and ASP.Net Core?

JQuery If Statement always outputs a consistent number regardless of the input provided

Using v-for with nested objects

Using local storage with github sites can lead to some unexpected and peculiar behavior

Transferring information from RSC to a nested child component using the Next.js application router

Beware: Inaccessible code detected in Reactjs usage

Oops, it seems like the project is missing a `pages` directory. Please kindly create one in the project root. Thank you!

To pass an interface property as an argument to another functional component

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?