Node.js -> Updating one field caused lose the other fields-CodePudding

So I am creating a backend for React project, and in there I'm filling out a form to create a page. For now, I have a dummy array of pages that looks like this;

const PAGES = [
  {
    id: "p1",
    name: "Webinar Butique",
    tema: "Boho",
    area: "Hardware Store",
    type: "Basic",
    imageUrl: "https://i.ytimg.com/vi/U72Aoxuv5d8/maxresdefault.jpg",
    creator: "u1",
  },
];

Properties are; "name", "type", "area", "tema"

In the backend, I created a middleware called createPage to make a post request on router.post("/api/pages", pagesController.createPage)

createPage

const createPage = (req, res, next) => {
  const { name, tema, type, area, creator } = req.body;
  // instead of doing -> const name = req.body.name for each of them use {}

  const createdPage = {
    id: uuidv4(),
    name,
    tema,
    type,
    area,
    creator,
  };

  PAGES.push(createdPage); // unshift(createdPage)

  res.status(201).json({ page: createdPage }); // 201 - sucessfully created in the server
};

For the updatePageById

const updatePageById = (req, res, next) => {
  //const stores the address of the object and not the object it self
  const { name, tema, type, area } = req.body;
  const pageId = req.params.pid;

  const updatedPage = { ...PAGES.find((p) => p.id === pageId) };
  const pageIndex = PAGES.findIndex((p) => p.id === pageId);

  updatedPage.name = name;
  updatedPage.type = type;
  updatedPage.area = area;
  updatedPage.tema = tema;

  // replace the old object at that index with the new updatedPage
  PAGES[pageIndex] = updatedPage

  res.status(201).json({page: updatedPage})
};

My question is, let's say, the user wants to change only the "name" property and leaves the others as it was.

I tried on Postman, patch to http://localhost:8080/api/pages/p1

{
    "name": "new butique"
}

But the problem is that when I request a get http://localhost:8080/api/pages/p1 it deletes the field of the other that is not updated (in this case, type,area,tema)

I am already copying existed array doing const updatedPage = { ...PAGES.find((p) => p.id === pageId) }; but losing them anyway.

In which way I can follow not lose these fields when the user updates only one field, instead of all the requested body?

Many thanks

CodePudding user response：

In your function you are telling it to update every value, even if there isnt one:

// This part of the function is causing you issues
updatedPage.name = name;
updatedPage.type = type;
updatedPage.area = area;
updatedPage.tema = tema;

Therefor your request of:

{
    "name": "new butique"
}

Will only have a value for name and set the rest of the properties to undefined. When you overwrite the previous item in PAGES it will have the new property but also all the properties with undefined as their values

Before you set the property to a new value, check that the property is present in the incoming request, if it is not then dont update it.

const updatePageById = (req, res, next) => {
  //const stores the address of the object and not the object it self
  const { name, tema, type, area } = req.body;
  const pageId = req.params.pid;

  const updatedPage = { ...PAGES.find((p) => p.id === pageId) };
  const pageIndex = PAGES.findIndex((p) => p.id === pageId);
  
  // only update if the property exists on the request
  if (name) updatedPage.name = name;
  if (type) updatedPage.type = type;
  if (area) updatedPage.area = area;
  if (tema) updatedPage.tema = tema;

  // replace the old object at that index with the new updatedPage
  PAGES[pageIndex] = updatedPage

  res.status(201).json({page: updatedPage})
};

Otherwise you can setup a new route for a PATCH request. This route would look similar in that if the request has the property, change it; if it does not: dont change it.