修改Json使用成React漂亮的拖拽

Question

我正在使用 this 库来实现拖放功能。但是，我的 json 是这种格式

[
  {
    "id": "5f7",
    "itemName": "ABC"
  },
  {
    "id": "780",
    "itemName": "CRD"
  },
]

然而，所有教程要点，我需要这样的东西：

[
  'item1': {
    "id": "5f7",
    "itemName": "ABC"
  },
  'item2': {
    "id": "780",
    "itemName": "CRD"
  }
]

那么我该如何修改我的 json 并添加用于拖放功能的 ID。即使有任何其他方法可以实现这一目标，我也非常感激。

Answer 1

您可以使用普通的 javascript 执行此操作，使用 map() 遍历项目的数组并创建一个封装该项目的新数组，请参见以下示例：

var currentArray = [{
  "id": "5f7",
  "itemName": "ABC"
},
{
  "id": "780",
  "itemName": "CRD"
}];

var result = "", sep = "";

currentArray.forEach((el, i) => {
  result += sep + "\"item" + (i+1) + "\"";
  result += ": " + JSON.stringify(el);
  sep = ", ";
});

console.log(JSON.parse("{" + result + "}"));

修改Json使用成React漂亮的拖拽

Modify Json to use into React beautiful Drag and drop

json

drag-and-drop

reactjs

react-beautiful-dnd