Попытка обновить MongoDB с помощью jQuery, jQuery UI с возможностью сортировки и Express JS

#jquery #node.js #mongodb #express #jquery-ui-sortable

#jquery #node.js #mongodb #экспресс #jquery-ui-sortable

Вопрос:

У меня есть список имен, которые я хочу повторно отправлять в приложение Express после каждой повторной сортировки с помощью виджета jQuery UI Sortable, а затем сохранять в моей базе данных Mongo. Я могу успешно изменить сортировку элементов списка, порядок данных правильный в консоли моего браузера, но я не могу понять, как правильно отправлять / получать его на стороне узла. Если я строю массив данных, весь массив сохраняется как ключ первого объекта, но если я не строю данные, то ничего не отправляется (объект данных пуст). Вот мой код, сокращенный для краткости:

В моем файле javascript для интерфейса / jQuery

 $(".favList")
    .sortable({
      connectWith: ".favDetail",
      update: function (event, ui) {
        var lis = $(".favList .favDetail");
        var ids = lis
          .map(function (i, el) {
            return {
              first: el.dataset.first,
              last: el.dataset.last,
            };
          })
          .get();

        var data = JSON.stringify(ids);
        // var data = ids;

        $.ajax({
          type: "POST",
          url: "/people/"   id   "/sortPeople",
          data: data,
        })
          .done(function (response) {
            console.log("OK", data);
          })
          .fail(function (response) {
            console.log("Error", response);
          });
      },
    })
    .disableSelection();
 

Вывод журнала консоли браузера (ВСЕ В ПОРЯДКЕ):

 data: [{id: "5fbf6cdabec1197e4514e7cb", first: "Boba", last: "Fett"},
{id: "5fbf6cdabec1197e4514e7ca", first: "Jango", last: "Fett"},
{id: "5fbf6cdabec1197e4514e7cc", first: "Aurra", last: "Sing"}]
 

Мой контроллер и маршрутизатор Express JS:

 const people = await People.findOne({
  _id: req.params.id,
});

await People.findOneAndUpdate(
  { _id: req.params.id },
  { favPeople: req.body },
).exec();

router.route('/:id/sortPeople').post(sortPeople);
 

Моя «народная» модель мангуста

 const mongoose = require('mongoose');
const peopleSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      trim: true,
      required: true,
    },
    favPeople: [
      {
        id: mongoose.Schema.ObjectId,
        first: String,
        last: String,
      },
    ],
    // favPeople: [],
  },
  {
    timestamps: true,
  },
);

module.exports = mongoose.model('People', peopleSchema);
 

Вывод журнала консоли узла:
(НЕ В ПОРЯДКЕ — массив сохраняется как ключ первого и единственного объекта, а не как массив объектов):

 data: {
 '{"id": "5fbf6cdabec1197e4514e7cb", first: "Boba", last: "Fett"},{"id": "5fbf6cdabec1197e4514e7ca", first: "Jango", last: "Fett"},{"id": "5fbf6cdabec1197e4514e7cc", first: "Aurra", last: "Sing"}': ''
}
 

Если я не использую метод JSON.stringify(), в экспресс-приложении ничего не получено: (вывод журнала консоли узла):

 data:  { undefined: [ '', '', '' ] }
 

То, что я хочу получить в приложении Express, — это тот же обновленный массив, который у меня есть в консоли браузера (ie):

 data: [{id: "5fbf6cdabec1197e4514e7cb", first: "Boba", last: "Fett"},
{id: "5fbf6cdabec1197e4514e7ca", first: "Jango", last: "Fett"},
{id: "5fbf6cdabec1197e4514e7cc", first: "Aurra", last: "Sing"}]
 

Любая помощь очень ценится! Спасибо!

Комментарии:

1. Покажите людям модель мангуста.

2. Привет, Ричард. Мой вопрос обновлен с помощью схемы «Люди». Я пробовал как пустой массив, так и массив с определенными элементами / типами, но результат тот же.

Ответ №1:

Я нашел решение. Для правильной передачи данных в контроллер должны быть включены ‘DataType’ и ‘ContentType’. Вот мой обновленный рабочий код:

 $.ajax({
  type: "POST",
  dataType: "json",
  contentType: "application/json",
  url: "/people/"   id   "/sortPeople",
  data: JSON.stringify(ids),
})