remove an offspring item from an array assembly

Question

remove an offspring item from an array assembly

I have a variable called today that stores data retrieved from an API. I'm attempting to delete some information from it using a function, but I keep encountering the error message

Cannot read property 'id' of undefined.

SAMPLE DATA

[
    {
        "id":324,
        "firstName":"Chris",
        "lastName":"Jake",
        "orders":[
            {
                "id":162,
                "meals":[
                    {
                        "id":27,
                        "name":"French Fries",
                        "description":"test"
                    },
                    {
                        "id":28,
                        "name":"Plain Rice, Beans and Fish",
                        "description":"test"
                    }
                ],
                "serveDate":"2019-07-16 00:00:00"
            }
        ]
    }
]

DELETE FUNCTION

delete() {
    for (let r = 0; r < this.today.length; r++) {
        if (this.today[r].orders[r].id === this.orderId) {
            this.today.splice(r, 1);
        }
    }
}

javascript angular typescript

Answer 1

Answer №1

The element "serverDate" is included in the array but does not have an id, which results in this error. If order[r].id is undefined, it will return false.

  delete() {
      for (let r = 0; r < this.today.length; r++) {
            if (this.today[r].orders[r].id && 
                this.today[r].orders[r].id ===   this.orderId) {
                this.today.splice(r, 1);
            }
      }
  }

Answer 2

The element "serverDate" is included in the array but does not have an id, which results in this error. If order[r].id is undefined, it will return false.

  delete() {
      for (let r = 0; r < this.today.length; r++) {
            if (this.today[r].orders[r].id && 
                this.today[r].orders[r].id ===   this.orderId) {
                this.today.splice(r, 1);
            }
      }
  }

Answer 3

Answer №2

Consider attempting it in the following manner:

 removeOrder() {
    this.today.forEach((element, index) => {
      element.orders.forEach((orderItem, subIndex) => {
        if (orderItem.id == this.orderId) {
          this.today[index].orders.splice(subIndex, 1);
        }
      })
    })
  }

Answer 4

Consider attempting it in the following manner:

 removeOrder() {
    this.today.forEach((element, index) => {
      element.orders.forEach((orderItem, subIndex) => {
        if (orderItem.id == this.orderId) {
          this.today[index].orders.splice(subIndex, 1);
        }
      })
    })
  }

Answer 5

Answer №3

I have a different perspective compared to the previous answer. "serverDate does not belong to the orders array as a whole, but rather it is a part of the first object within the orders array. Your issue lies in the structure of your for loop. Let's break down what is happening during each iteration:

for (let r = 0; r < today.length; r++) {
    if (today[r].orders[r].id === this.orderId) {
        today.splice(r, 1);
    }
}

//r == 0
today[r].orders[r].id === this.orderId //accesses the 0th element of the today array and the 0th element of the orders array

//r == 1
today[r].orders[r].id === this.orderId //accesses the 1st element of the today array and the 1st element of the orders array

//!! the remaining orders in today[0] and the order at index today[1].order[0] are being skipped!!

To avoid this issue, you should consider using nested for loops.

for (let r = 0; r < today.length; r++) { 
    for (let s=0 ; s < today[r].orders.length; s++) { 
        if (today[r].orders[s].id===this.orderId) { 
            //perform operations on either r or s depending on the context
        }
    }
}

Answer 6

I have a different perspective compared to the previous answer. "serverDate does not belong to the orders array as a whole, but rather it is a part of the first object within the orders array. Your issue lies in the structure of your for loop. Let's break down what is happening during each iteration:

for (let r = 0; r < today.length; r++) {
    if (today[r].orders[r].id === this.orderId) {
        today.splice(r, 1);
    }
}

//r == 0
today[r].orders[r].id === this.orderId //accesses the 0th element of the today array and the 0th element of the orders array

//r == 1
today[r].orders[r].id === this.orderId //accesses the 1st element of the today array and the 1st element of the orders array

//!! the remaining orders in today[0] and the order at index today[1].order[0] are being skipped!!

To avoid this issue, you should consider using nested for loops.

for (let r = 0; r < today.length; r++) { 
    for (let s=0 ; s < today[r].orders.length; s++) { 
        if (today[r].orders[s].id===this.orderId) { 
            //perform operations on either r or s depending on the context
        }
    }
}

Answer 7

Answer №4

When working with Angular services, you may receive a JSON object that needs to be manipulated. Here's an example of how you can remove specific data:

const data =  `[{
    "id":324,
    "firstName":"Chris",
    "lastName":"Jake",
    "orders":[
        {
            "id":162,
            "meals":[
                {
                    "id":27,
                    "name":"French Fries",
                    "description":"test"
                },
                {
                    "id":28,
                    "name":"Plain Rice, Beans and Fish",
                    "description":"test"
                }
            ],
            "serveDate":"2019-07-16 00:00:00"
        }
    ]
}]`;

let parse = JSON.parse(data); console.log(parse);

const orderid = 27;
console.log(parse[0].orders[0].meals);
for(let i = 0; i < parse[0].orders[0].meals.length; i++ ) {
    if(parse[0].orders[0].meals[i].id == orderid) {
        parse[0].orders[0].meals.splice(i, 1)
    }
}
console.log(parse)

If you're dealing with HTTP endpoints, there are more efficient ways to handle the data. Define your interfaces as follows:

Meal Interface

export interface meal{
    id: num | string;
    name: string;
    description: string
}

Order Interface

export interface order{
    id: num | string;
    meals: meal[];
    serveDate: string;
}

Data Interface

export interface data {
    id: num|string;
    firstname: string;
    lastname: string;
    orders: order[];
}

In your service: this.http.get(this.dataurl)

You can navigate through your JSON model after subscribing as shown below:

this.http.get<data[]>(this.dataurl).subscribe(result => {
    if(result != null) {
        for(let u of result)
        {
            for(let o of u.orders)
            {
                for(let m of o.meals)
                {
                    if(orderid === m.id)
                    {
                     //remove your item from array
                    }
                }
            }
        }
    }
});

Answer 8

When working with Angular services, you may receive a JSON object that needs to be manipulated. Here's an example of how you can remove specific data:

const data =  `[{
    "id":324,
    "firstName":"Chris",
    "lastName":"Jake",
    "orders":[
        {
            "id":162,
            "meals":[
                {
                    "id":27,
                    "name":"French Fries",
                    "description":"test"
                },
                {
                    "id":28,
                    "name":"Plain Rice, Beans and Fish",
                    "description":"test"
                }
            ],
            "serveDate":"2019-07-16 00:00:00"
        }
    ]
}]`;

let parse = JSON.parse(data); console.log(parse);

const orderid = 27;
console.log(parse[0].orders[0].meals);
for(let i = 0; i < parse[0].orders[0].meals.length; i++ ) {
    if(parse[0].orders[0].meals[i].id == orderid) {
        parse[0].orders[0].meals.splice(i, 1)
    }
}
console.log(parse)

If you're dealing with HTTP endpoints, there are more efficient ways to handle the data. Define your interfaces as follows:

Meal Interface

export interface meal{
    id: num | string;
    name: string;
    description: string
}

Order Interface

export interface order{
    id: num | string;
    meals: meal[];
    serveDate: string;
}

Data Interface

export interface data {
    id: num|string;
    firstname: string;
    lastname: string;
    orders: order[];
}

In your service: this.http.get(this.dataurl)

You can navigate through your JSON model after subscribing as shown below:

this.http.get<data[]>(this.dataurl).subscribe(result => {
    if(result != null) {
        for(let u of result)
        {
            for(let o of u.orders)
            {
                for(let m of o.meals)
                {
                    if(orderid === m.id)
                    {
                     //remove your item from array
                    }
                }
            }
        }
    }
});

remove an offspring item from an array assembly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using AngularJS to Extract JSON Data from a Table in an HTML Document

Is there a way for me to collaborate on a footer control with a different website?

Ways to implement the useEffect hook within a table component for retrieving data from the backend

What could be causing the data in the data table to remain undeleted unless the page is manually refreshed

using an external JavaScript function in the MongoDB shell

How can the top height of a jquery dialog be reduced?

how to choose the :after pseudo-element with jQuery

Removing Form Fields Utilizing Javascript

Button react-native press following textInput within scroll view aware of keyboard movements

Experiencing CORS problem in Ionic 3 when accessing API on device

What is the best way to dynamically assign an id to an ajax Actionlink in ASP.NET?

Tips for automatically closing a dropdown menu when it loses focus

In JavaScript, escape is comparable to android decode

Using webpack to load the css dependency of a requirejs module

Tips for sending information to a child component from a parent in Vue.js

Automatically submitting the form

Unexpected character error occurs when using VSCode with Vue: ''‌'

Implement a feature where users can add text inputs to specific columns in a table by

Unable to retrieve scripts upon returning to the main page of a Jquery website

Angular 6 is showcasing dates in a quirky manner