Как добавить новый элемент (объект) в массив который в объекте с помощью fetch/post?

Question

[shmebulok]

Здравствуйте, к сути вопроса:
Я создаю веб-приложение ToDo, проект для себя, так сказать для изучения. Во время работы с fetch/post появился вопрос на который я не смог найти нормальный ответ, и решился задать его тут.
У меня есть db.json файл который находится на локальном сервере (json-server)
Вот такой:

{
  "usersTodos": [
    {
      "id": 1000,
      "todos": []
    }
  ]
}

Как видите есть массив usersTodos в котором есть один объект с id и массивом todos (к слову, идея в том, что этот массив хранит объекты также как и usersTodos )
С помощью fetch методом post я могу добавить новый объект в usersTodos, но я хочу добавить его не в usersTodos, а в массив todos.

fetch('http://192.100.0.0:3000/usersTodos', {
          method: 'post',
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(obj)
        })

Данный код добавляет новый объект в usersTodos
Как я и говорил выше, что todos хранит объекты, как я могу с помощью fetch заPOStить, добавить в todos новый элемент и возможно ли это?
Думаю вопрос я задал корректно, и он был более менее понятен для Вас

Comments

[Сергей Соколов]

Что за сервер у вас? По запросу POST /usersTodos что происходит – перезаписывается текстовый JSON-файл?

[shmebulok]

Сергей Соколов, сервер фейковый REST API созданный с помощью json-server-а. По запросу добавляется новая запись в файл db.json
было так:

{
  "usersTodos": [
    {
      "id": 1000,
      "todos": []
    }
  ]
}

после пост запроса:

{
  "usersTodos": [
    {
      "id": 1000,
      "todos": []
    },
    {
      "id": 1001,
      "todos": []
    }
  ]
}

[Сергей Соколов]

shmebulok, приведите ссылку на репо этого сервера или его код. Потому, что вопрос именно про него.

[shmebulok]

Сергей Соколов, https://github.com/typicode/json-server

Answer 1

[Сергей Соколов]

т.к. используется typicode/json-server
можно видимо изменять сохранённые данные по их id, запросом PATCH:

const obj = {
  todos: [
    {title: "QnA", description: "прочитать документацию"},
  ],
}
fetch('http://192.100.0.0:3000/usersTodos/1000', { // здесь 1000 это id
          method: 'patch',
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(obj)
        })

Чтобы добавить, надо сначала вытащить по id сохранённую запись, и в её поле todos запушить новый туду.

Comments

[shmebulok]

Спасибо большое, я тоже так пытался. но про метод 'patch' особо не знал. Но к сожалению вылезла другая ошибка с CORS policy
Access to fetch at '192.100.0.0:3000/usersTodos/1000' from origin '192.100.0.0:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Я как понял мой фейк json-server не дает осуществится кроссдоменному запросу. И нужно в header ответа от сервера Access-Control-Allow-Origin: * добавить? Правильно ли я понял?

[shmebulok]

shmebulok, Вдруг кто то столкнется с такой же проблемой. Решилось это с помощью изменения в коде самой json-server. Для начало найдите его у себя в диске, он должен быть в AppData\Roaming\npm\node_modules\json-server там в папке lib будет две папки: cli и server.
В первой папке запуск и сборка самого json-server-а, а в папке server все действия.
Зайдите в папку server там в defaults.js, этот скрипт возвращает массив с многими настройками сервера, найдите там

// Enable CORS for all the requests, including static files
if (!opts.noCors) {   
  }

Вот тут то все дело, и просто измените его

if (!opts.noCors) {
    let corsOptions = {
        credentials: true,
        origin:'*', 
        methods: ['GET', 'PUT', 'POST', 'PATCH', 'DELETE'],
        allowedHeaders: 'accept, content-type'
    };
    arr.push(cors(corsOptions));
  }

При origin:'*' можно отправлять с любого домена, если вам нужно чтобы только один домин отправлял, то просто origin:'example.com' после этого перезапустите json-server и попробуйте за патчить один объект в БД

[TXH_kg]

а в током случае что делать?
{
"usersTodos": [
{
"id": 1000,
"todos": [
{
"todo": []
}
]
}
]
}