How to edit data of arrays from API

Ionic Framework Ionic Angular
1

I have an array in which the data is coming from Server API.

Data format from API

raw: any = [];

{

   data_from: "2021-11-18"
   data_to: "2021-11-17"
    id: "1"
    material: [
        {
            id: 'm1',
            qty: null,
            mid: 22
        },
 {
            id: 'm12',
            qty: '1 mm',
            mid: 1
        }
    ]

}

I want to apply changes to existing data or add new data inside the array of material.

2

Can you please specify what your problem is?

3

@EinfachHans Thanks for the comment, The data from API has arrays inside, So first arrays should be stored locally that I can make changes to them. I don’t know how to store each array from API locally.

4

This question is hard to answer directly because from a casual glance at the data snippet you provided (which, incidentally, isn’t valid JSON - aside from quoting, that bare ‘1 mm’ is going to kill you) I can think of lots of modifications that could be made on a naked array that would violate all sorts of reasonable constraints the backend is going to have.

What endpoints does the backend expose for submitting changed or additional data? That’s going to affect how I would approach this.

5

@rapropos Thanks for the comment. I fixed the array of data now. The only thing I want is that I am getting this data from the server and I will make updates or insert data to the (material) array and after that, I need to submit the data in the below format only not all the data that came from the server.

{
    id: "1"
    material: [
        {
            id: 'm1',
            qty: null,
        },
        {
            id: 'm12',
            qty: '1 mm',
        },
//New data inserted from html form to array
        {
            id: 'm14',
            qty: '1 Kg',
        }
    ]

}
6

I don’t mean to be rude, but I asked a specific question:

So I’m looking for an answer that looks like:

I get the data from a GET request to /api/materials/1, where the 1 is the id in the top-level object that is returned. I then POST the entire changed object back to that same URL: /api/materials/1, including the id field (even though this information is available from the URL itself).

The reason I’m asking is that there are a myriad of ways of doing this, and the way I would organize the client code depends on what the server is expecting. Incidentally, that sample scenario above is likely not what I would do if I were writing the backend, because it causes a lot of extra work on that end. You (probably) would have to effectively do the query behind the GET again, walk through the two sets of arrays, compile a list of additions and deletions, do those. It would be considerably easier to have a PUT or POST endpoint for additions / modifications of submaterials, where you would POST just the new data in the body of the request, and a corresponding DELETE endpoint for removing things.