metoda PATCH - pojedyńcza operacja dla każdego elementu tablicy

Question

Cześć. Mam aplikację w Reakcie której głównym komponentem jest formularz. Chcę poprzez ten formularz edytować dane i wysyłam do API wartość która jest tablicą:

participants.push({ participant_id: person, place_id: place });

kiedy request został dodany moja metoda PATCH wygląda tak: 

{
    "patch": [
        {
            "op": "add",
            "path": "/participants",
            "value": [
                {
                    "participant_id": "e4c0958d-4e08-405e-1cab-d3447dd1cf04",
                    "place_id": "853719d0-8a14-45f8-1b02-b352209ab340"
                },
                {
                    "participant_id": "ae2ad2e9-47ad-1604-86e7-39edc4f8cba1",
                    "place_id": "97671302-0b53-418b-4714-5b96fb67c836"
                },
                {
                    "participant_id": "e4e70581-ef51-470c-b674-51487e9e97ed",
                    "place_id": "853719d0-8an4-45f8-9b02-b352209ab340"
                },
            ]
        }
    ]
}

Niestety nie jest to czego oczekuje ode mnie API. Request powinen wyglądać w ten sposób: 

{
 "patch": [
{
        "op": "replace",
        "path": "/participants/0",
        "value": {
            "participant_id": "27311fb1-a1be-4a2f-a64a-05ad93e204b4",
            "place_id": "deb3a7d7-bf57-4d3c-8983-3398ffe3b241"
        }
    },
    {
        "op": "replace",
        "path": "/participants/1",
        "value": {
            "participant_id": "aa676d70-49d6-4302-8de8-9ea0bccc0d2d",
            "place_id": "deb3a7d7-bf57-4d3c-8983-3398ffe3b241"
        }
    },
    {
        "op": "replace",
        "path": "/participants/2",
        "value": {
            "participant_id": "5455db6f-d0ed-41ad-838a-da06e047a665",
            "place_id": "deb3a7d7-bf57-4d3c-8983-3398ffe3b241"
        }
    }
]
}

Jak do tego podejść ? Jak skonstruować wartość wysyłaną z formularza żeby PATCH wyglądał tak by operacja była dla każdego elementu tablicy ? 

Próbowałem już modyfikować tablicę która jest wartością, mapując przez nią i dla każdego elementu tworzyć nowy obiekt wyglądający jak ten z oczekiwanego przez API patcha, ale to dało jedynie jeszcze gorszy i spowodowały dziwne zagnieżdżenia obiektów w tym requeście. 

Może ktoś coś podpowiedzieć ? 

Comments

Tablica participants, do której pushujesz nowy obiekt, to jest to samo co value w wysyłanym requeście? Jeśli tak, to gdzieś powinieneś mieć referencję do wyższej tablicy, bo z tego co widzę to do niej powinieneś pushować - value w oczekiwanym requeście jest obiektem, a nie tablicą.

---

Tak tablica participants = value z requestu 

natomiast potrzebuję żeby każdy element z tablicy participants był jako osobna operacja w requeście.

---

Pokaż jak wysyłasz cały request.

---

Tak w skrócie wygląda Select input z formularza: 

  <Select name={field.name} value={field.value}>
       <MenuItem>
          <Checkbox onClick={addPerson}>
           <Checkbox onClick={addPerson}>
        </MenuItem>
  </Select>

w ten sposób ustalam wartość inputu: 

 const { control } = useFormContext();
  const { field } = useController({
    name,
    control,
  });

  const addPerson = (place, person) => (e) => {
    if (!e.target.checked) {
      field.onChange(field.value.filter((participant) => participant.participant_id !== person));
      return;
    }
    const array = [...field.value];
    const index = array.findIndex((item) => item.participant_id === person);
    if (index !== -1) {
      array.splice(index, 1);
    }
    array.push({ participant_id: person, place_id: place });
    field.onChange(array);
  };

tak wygląda wartość: 

[
  {
    "participant_id": "3eccf6f1-5442-4782-a071-cc3232f2fb9c",
    "place_id": "853719d0-8a14-45f8-9b02-b352209ab340"
  },
  {
    "participant_id": "dc16e733-b7fe-4bd7-9bd1-d080d251534e",
    "place_id": "853719d0-8a14-45f8-9b02-b352209ab340"
  },
  {
    "participant_id": "41b68549-bb80-4f5c-b669-518aac5d6e6c",
    "place_id": "853719d0-8a14-45f8-9b02-b352209ab340"
  }
]

tak wygląda request: 

{
	"patch": [
		{
			"op": "add",
			"path": "/participants",
			"value": [
				{
					"participant_id": "3eccf6f1-5442-4782-a071-cc3232f2fb9c",
					"place_id": "853719d0-8a14-45f8-9b02-b352209ab340"
				},
				{
					"participant_id": "dc16e733-b7fe-4bd7-9bd1-d080d251534e",
					"place_id": "853719d0-8a14-45f8-9b02-b352209ab340"
				},
				{
					"participant_id": "41b68549-bb80-4f5c-b669-518aac5d6e6c",
					"place_id": "853719d0-8a14-45f8-9b02-b352209ab340"
				}
			]
		}
	]
}

 

---

Ale nadal nie pokazałeś jak wysyłasz request, co tam przekazujesz. W jaki sposób formujesz całą tablicę patch?

---

przekazuję tablicę którą wysłałem w poprzednim komentarzu, opisując jak wygląda wartość ktorą wysyłam  nie formuję w żaden sposób tablicy patch, bo moje pytanie jest właśnie jak powinienem to zrobić 

---

A co formuje tę tablicę patch? Nie wiem jak odpowiedzieć na pytanie o formowanie czegoś, co nie wiem w jaki sposób działa. Dlatego pytam jak wysyłasz request i gdzie przekazujesz tę tablicę - do jakiejś funkcji z biblioteki?

---

Axios + useForm z react-hook-form (kontrolera i kontkekstu formularza) 

metoda patch wygląda tak: 

  static updateCourse(courseId, changes) {
    return Client.patch(`${COURSES_ENDPOINT}/${courseId}`, { patch: changes });
  }

i w innych formularzach przy inputach które dostają tablicę, to działa tak jak oczekuję, w tym przypadku nie rozumiem, dlaczego się to nie dzieje. 

---

Metoda Client.patch to jest alias dla axios.patch? Wykonaj to tuż przed wywołaniem Client.patch:

console.log('changes:', changes);

i pokaż co wyświetli konsola.