Modify Json to use into React beautiful Drag and drop

Question

I am using this library for react drag and drop functionality. However, my json is in this format

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

However, all the tutorial points, i will need something like this:

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

So how can i modify my json and add id for drag and drop functionalities. Even if there is any other way of achieving this then i really appreciate that.

`json2 = json1.map((el, i) => ({ ['item'+i]: el }))` – Mayank Shukla Dec 03 '18 at 15:15 — Mayank Shukla, Dec 03 '18 at 15:15

Alessandro · Accepted Answer · 2018-12-03T15:58:48.967

1

You can do this with plain javascript, loop through your item's array with map() and create a new array that encapsulates the item, see following example:

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 + "}"));

edited Dec 03 '18 at 15:58

answered Dec 03 '18 at 15:17

Alessandro

4,382
8
36
70

is there any way i can do something like this {'item1': { "id": "5f7", "itemName": "ABC" }, 'item2': { "id": "780", "itemName": "CRD" }} .So removing array and put json object inside multiple json object. – Tanmay Parmar Dec 03 '18 at 15:20
You can use `JSON.stringify`, see my updated snippet. – Alessandro Dec 03 '18 at 15:24
You have at least to wrap every elements in an array. – Alessandro Dec 03 '18 at 15:25
Well, I see... if you really want a string like that you wrote above, take a look to my snippet (the `result` variable) – Alessandro Dec 03 '18 at 15:52

Modify Json to use into React beautiful Drag and drop

1 Answers1