Блог

У меня есть карта под названием «метки», которая содержит другие карты в качестве полей. Мне нужно сделать что-то вроде цикла forEach (или map) с получением ключа и значения каждой вложенной карты.

Это мои данные:

    "marks" : {
       "mark_01": {x: 10, y: 200},
       "mark_02": {x: 200, y: 100},
        ...
       "mark_99": {x: 1000, y: 1039}
    }
  

То, что я пытаюсь сделать, это:

  // This is wrong but represents the main idea
 const newMarks = marks.map(mark => {
    // Get the mark key "mark_number"
    // Change its value (x, y)
    // Return an object with the same key and the new manipulated value
 })
  

Есть идеи? Результирующие данные должны выглядеть следующим образом:

 "marks" : {
      "mark_01" : {x: 0, y: 190},
      "mark_02" : {x: 190, y: 90},
       ...
      "mark_99" : {x: 990, y: 1029}
 }
  

Приведенный ниже фрагмент может вам помочь

 const { marks } = {
  marks: {
    mark_01: { x: 10, y: 200, other_if_have: 'a' },
    mark_02: { x: 200, y: 100, other_if_have: 'b' },
    mark_99: { x: 1000, y: 1039, other_if_have: 'c' },
  },
}

const temp = Object.keys(marks).map((mark) => {
  const manipulate = ({ x, y }) => ({
    x: x - 10,
    y: y - 10,
  })
  return [mark, { ...marks[mark], ...manipulate(marks[mark]) }]
})

const res = { marks: Object.fromEntries(temp) }

console.log(res)  

Ссылка:

• Object.keys() документ
• Object.entries() документ

Другое альтернативное решение:

 
const edited = Object.fromEntries(Object.entries(marks).map(
    ([k,{x,y}]) => [k,{x: x 10, y: y 10}]
));
  

Вы можете проверить это здесь:https://jsfiddle.net/sandro_paganotti/ztw1exb4/13

Можно было бы использовать for...in цикл:

 const marks = {
  "mark_01": {
    x: 10,
    y: 200
  },
  "mark_02": {
    x: 200,
    y: 100
  },
  "mark_99": {
    x: 1000,
    y: 1039
  }
}

console.log("before", marks)

for (let i in marks) {
  marks[i].x  = 1;
  marks[i].y  = 1;
}

console.log("after", marks)  

Тем не менее, вы должны отметить:

Проблема с for…in цикл заключается в том, что он перебирает свойства в цепочке прототипов. Когда вы перебираете объект с помощью for…in цикл, вам нужно проверить, принадлежит ли свойство объекту. Вы можете сделать это с помощью hasOwnProperty.

Итак, чтобы учесть это:

 const marks = {
  "mark_01": {
    x: 10,
    y: 200
  },
  "mark_02": {
    x: 200,
    y: 100
  },
  "mark_99": {
    x: 1000,
    y: 1039
  }
}

console.log("before", marks)

for (let i in marks) {
  if (marks.hasOwnProperty(i)) {
    marks[i].x  = 1;
    marks[i].y  = 1;
  }
}

console.log("after", marks)  

Это хорошая статья, чтобы ознакомиться с чем-то подобным.

если у вас есть неопределенное количество свойств внутри вашего объекта, вы можете сделать вложенные для этого

 let marks = {
  "mark_01": {x: 10, y: 200, z: 300, ...},
  "mark_02": {x: 200, y: 100, z: 10, ...},
  "mark_99": {x: 1000, y: 1039, z: 1200, ...}
}

let newMarks = {}
for (const [key, value] of Object.entries(marks)) {
  let newValues = {}
  for (const [innerKey, innerValue] of Object.entries(value)) {
    newValues[innerKey] = innerValue - 10
  }
  newMarks[key] = newValues
}
console.log(newMarks);