Question 109242 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – Deleting a specified object inside an array in angular

Using Angular typescript, I am getting a json array object. I want to delete an object that I specified in the object I received. But it never deletes it.

addCategorySub(categorySub: CategorySubModel, index: number) {
  categorySub.id = categorySub.id.toString().trim();

  this.categorySubService.postCategorySub(categorySub)
    .subscribe({
      next: (response: any) => {
        //this.categorySubList.push(response.data);
        //this.categorySubList = [...this.categorySubList];

        this.categoryList[0].categorySubs.push({
          categoryId: response.data.categoryId,
          createdDate: response.data.createdDate,
          id: response.data.id,
          name: response.data.name,
          totalCount: response.data.totalCount,
          updatedDate: response.data.updatedDate
        });
        this.categoryList = [...this.categoryList]
      },
      complete: () => {
        this.messageService.add({severity: 'success', summary: 'Success', detail: `${categorySub.name}.`, life: constants.TOAST_SUCCESS_LIFETIME});
        this.messageService.clear('c');

        //this.categoryList = this.categoryList.filter((p) => p.id !== categorySub.id).filter((p) => p.id !== undefined);
        //this.categoryList[index] = this.categoryList[categorySub.id];
        //delete this.categoryList[categorySub.id]

        //this.categoryList = this.categoryList.filter((p) => p.categorySubs.filter((x) => x.id !== categorySub.id).splice(categorySub.id, 1));

        console.log(this.categoryList)

      },
      error: (e) => {
        this.messageService.add({severity: 'error', summary: 'Hata', detail: `not record n${e}`, life: constants.TOAST_ERROR_LIFETIME});
        this.messageService.clear('c');
        }
      })
  }

For example, I want to delete data number 27.
enter image description here

  export class CategoryModel {
    id: number | any;
    name: string | any;
    companyId: number | any;
    createdDate: Date | undefined;
    updatedDate: Date | undefined;
    totalCount: number | any;
    categorySubs: CategorySubModel[] = []; //any;
  }

  export class CategorySubModel {
    id: number | any;
    name: string | any;
    categoryId: number | any;
    createdDate: Date | undefined;
    updatedDate: Date | undefined;
    totalCount: number | any;
  }

json object points to categorySubs sub. So I want to delete from here

For example I have a json object below, I want to delete some selected data in this json object

  [
    {
        "id": 3,
        "name": "Yazıcı",
        "businessCode": 0,
        "totalCount": 1,
        "createdDate": "2023-03-01T06:08:13.9752895",
        "updatedDate": "2023-03-13T10:00:42.4496853",
        "companyId": 3,
        "categorySubs": [
            {
                "id": 8,
                "name": "Mobil Yazıcı",
                "createdDate": "2023-03-01T07:17:39.6269764",
                "updatedDate": "2023-03-13T10:00:15.8128449",
                "categoryId": 3
            },
            {
                "id": 9,
                "name": "Lazer Yazıcı3",
                "createdDate": "2023-03-01T07:17:44.0560564",
                "updatedDate": "2023-03-13T10:00:50.2878444",
                "categoryId": 3
            },
            {
                "id": 10,
                "name": "Nokta Vuruşlu Yazıcı",
                "createdDate": "2023-03-01T07:18:01.0370904",
                "updatedDate": "0001-01-01T00:00:00",
                "categoryId": 3
            },
            {
                "id": 4070,
                "name": "asd",
                "createdDate": "2023-03-13T12:59:55.9999323",
                "updatedDate": "0001-01-01T00:00:00",
                "categoryId": 3
            },
            {
                "id": 4071,
                "name": "tert",
                "createdDate": "2023-03-13T13:07:20.3666421",
                "updatedDate": "0001-01-01T00:00:00",
                "categoryId": 3
            },
            {
                "id": "31",
                "name": "wq",
                "companyId": 3,
                "categoryId": 3
            },
            {
                "categoryId": 3,
                "createdDate": "2023-03-13T13:13:43.5022618Z",
                "id": 4072,
                "name": "wq",
                "updatedDate": "0001-01-01T00:00:00"
            }
        ]
    }
  ]
Tags:

2

Answers


  1. 0 
    const item = this.categoryList[0].categorySubs.find(category => category.id === 8);
if (item) {
    const index = this.categoryList[0].categorySubs.indexOf(item);
    this.categoryList[0].categorySubs.splice(index, 1);
}
    Login or Signup to reply.
  2. 0

    To delete the item, find the index of the item in your array, then use the slice function.

    public deleteSubCategory(subCategoryId: number) {

  const subCategoryIndex = this.categoryList[0].categorySubs.findIndex(subCategory => subCategory.id === subCategoryId);
  
  // if a matching id item is available then above code will return an index 0 or greater

  if (subCategoryIndex > -1) {
    this.categoryList[0].categorySubs.splice(subCategoryIndex, 1);
  }

  // some UI component libraries require you to reconstruct the array,
  // to pick up the new changes in the array
  // in that case you have to do one more step

  this.categoryList = Object.assign([], this.categoryList); 
}

    You can bind the above deleteSubCategory() function to click event on each of your category. Upon clicking the delete button, emit the category’s id to the function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search