(.net core 3.1 & Angular) Json Patch: The path segment is invalid for an array index

Question

I have a json file with the following content:

{
    "Id": 0,
    "Name": "todoList1",
    "ListItems": [
        {
            "Id": 1,
            "Description": "listItem1.1",
            "Done": false
        },
        {
            "Id": 2,
            "Description": "listItem1.2",
            "Done": true
        }
    ]
}

Additionally I have an ASP.NET Core 3.1 API method which should be able to partially update the json:

 [HttpPatch("{name}")]
    public async Task<TodoListDomainModel> Update([FromRoute] string name, [FromBody]JsonPatchDocument<TodoListDomainModel> todoListJsonPatchDocument)
    {
        var todoListToPatch = (await this._todoListService.GetTodoLists()).Single(x => x.Name == name);
        todoListJsonPatchDocument.ApplyTo(todoListToPatch);
        return todoListToPatch;
    }

The TodoListDomainModel:

public class TodoListDomainModel
{
    public int Id { get; set; }
    public string Name { get; set; }

    public ICollection<ListItemDomainModel> ListItems { get; set; } = new Collection<ListItemDomainModel>();
}

The ListItemDomainModel:

public class ListItemDomainModel
{
    public ListItemDomainModel()
    {
    }

    public int Id { get; set;  }

    public string Description { get; set; }

    public bool Done { get; set; }

    public DateTime DueDate { get; set; }
}

Calling the API method via Angular

When calling the API method via angular:

save(selectedTodoList: TodoList) {
    let test = JSON.stringify(selectedTodoList.listItems);
    let json = `[{"op": "replace", "path": "/ListItems", "value": ${test} }]`;
    let url = `https://localhost:44305/todolist/${selectedTodoList.name}`;
    return this.http.patch<TodoList>(url, json);
  }

I'm not even coming to the breakpoint in the api method.

Is there something I'm doing wrong?

Thanks in advance

bad way to compose the JSON body: the string could result malformed (and that's the supect about your trouble). Build the JSON as a JavaScript object, and deliver it as is. — Mario Vernari
– Mario Vernari, Commented Aug 3, 2020 at 7:40
What do you mean with building the JSON as a JS object? sorry, I'm new to the frontend stuff :) — xeraphim
– xeraphim, Commented Aug 3, 2020 at 7:45
@YiyiYou: The TodoListDomainModel looks like this: public class TodoListDomainModel { public int Id { get; set; } public string Name { get; set; } public ICollection<ListItemDomainModel> ListItems { get; set; } = new Collection<ListItemDomainModel>(); } — xeraphim
– xeraphim, Commented Aug 3, 2020 at 7:48

xeraphim · Accepted Answer · 2020-08-03 08:17:00Z

2

Try to compose the JSON body as JavaScript object:

save(selectedTodoList: TodoList) {
    const body = [{
        op: "replace",
        path: "/ListItems",
        value: selectedTodoList.listItems
    }];
    let url = `https://localhost:44305/todolist/${selectedTodoList.name}`;
    return this.http.patch<TodoList>(url, body);
}

edited Aug 3, 2020 at 8:17

xeraphim

4,70311 gold badges64 silver badges119 bronze badges

answered Aug 3, 2020 at 7:48

Mario Vernari

7,4241 gold badge37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

xeraphim Over a year ago

I've added a .subscribe() at the end of the http.patch. Unfortunately, I now get the following error:

error: Object { type: "https://tools.ietf.org/html/rfc7231#section-6.5.1", title: "One or more validation errors occurred.", status: 400, … }

. How is this possible? I don't even have any validations :)

xeraphim Over a year ago

It says The JSON patch document was malformed and could not be parsed it seems like there is still something wrong with creating the body this way :(

Mario Vernari Over a year ago

yes, but that's a good sign: it means that the JSON is sent and arrives to the backend. Now the problem is that the C# class does not match the incoming JSON.

Mario Vernari Over a year ago

use the browser dev-tools (F12 for Chrome), and analyze what's the actual body flowing through the HTTP patch request.

Mario Vernari Over a year ago

well, yes. I didn't know what JsonPatchDocument is, but it seems a wrapper around a collection, thus an array is likely the right object to send. Notice that I've wrapped the body constant with the square braces.

|

Collectives™ on Stack Overflow

(.net core 3.1 & Angular) Json Patch: The path segment is invalid for an array index

Calling the API method via Angular

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Calling the API method via Angular

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related