Recreate the Json by identifying the missing value

Question

I have a Json data that I need adjust before sending it to my component. My Json is as below. I need to identify the missing fields and move the below ones up.

[{
  "Id": "a",
  "ColumnLocation": "0",
  "RowLocation": "0"
}, {
  "Id": "b",
  "ColumnLocation": "0",
  "RowLocation": "1"
},
{
  "Id": "4",
  "ColumnLocation": "0",
  "RowLocation": "3"
},
 {
  "Id": "c",
  "ColumnLocation": "1",
  "RowLocation": "0"
}, {
  "Id": "d",
  "ColumnLocation": "1",
  "RowLocation": "2"
}, {
  "Id": "e",
  "ColumnLocation": "2",
  "RowLocation": "0"
},
 {
  "Id": "e",
  "ColumnLocation": "2",
  "RowLocation": "2"
}]

My required Json is:

[{
  "Id": "a",
  "ColumnLocation": "0",
  "RowLocation": "0"
}, {
  "Id": "b",
  "ColumnLocation": "0",
  "RowLocation": "1"
},
{
  "Id": "4",
  "ColumnLocation": "0",
  "RowLocation": "2"
},
 {
  "Id": "c",
  "ColumnLocation": "1",
  "RowLocation": "0"
}, {
  "Id": "d",
  "ColumnLocation": "1",
  "RowLocation": "1"
}, {
  "Id": "e",
  "ColumnLocation": "2",
  "RowLocation": "0"
},
 {
  "Id": "e",
  "ColumnLocation": "2",
  "RowLocation": "1"
}]

Here after (0,0), (0,1), property (0,2) is missing so I need to move it up and make it (0,2).. Same way after(1,0), property(1,1) is missing so it has to be (1,1).

I tried writing a custom function for this, but couldn't able to achieve it, so thought any map function that fits this scenario

I am getting gadgets information from the API. In some cases, some gadgets might be missing, so I need to pull there location up and draw the gadgets.

this.userService.getGadgets(id).subscribe(gadgets => { this.res = gadgets.map(function (v) { return v.ColumnLocation; }); 

// required logic ************/ 
for (let gadget of gadgets) {
 this.dashboardsText = ""; 
switch (gadget.Name) {

Answer 1

Array.prototype.move = function (old_index, new_index) {
     if (new_index >= this.length) {
           var k = new_index - this.length;
           while ((k--) + 1) {
           this.push(undefined);
          }
        }
       this.splice(new_index, 0, this.splice(old_index, 1)[0]);
       };      

   var array, i;

   array = [{"Id": "a","ColumnLocation": "0","RowLocation": "0"}, {
   "Id": "b","ColumnLocation": "0", "RowLocation": "1"}]
   i = array.length;
   while (i--) {
       if (!array[i].ColumnLocation) {
       array.move(i, i+1);
   }

Answer 2

You could store the last column and row, then check if it is not the same column, then reset row counter.

Then check if RowLocation is equal to row counter and if not set the new value.

Finally increment row counter.

var array = [{ Id: "a", ColumnLocation: "0", RowLocation: "0" }, { Id: "b", ColumnLocation: "0", RowLocation: "1" }, { Id: "4", ColumnLocation: "0", RowLocation: "3" }, { Id: "c", ColumnLocation: "1", RowLocation: "0" }, { Id: "d", ColumnLocation: "1", RowLocation: "2" }, { Id: "e", ColumnLocation: "2", RowLocation: "0" }, { Id: "e", ColumnLocation: "2", RowLocation: "2" }];

array.forEach(function (col, row) {
    return function (o) {
        if (col !== o.ColumnLocation) {
            col = o.ColumnLocation;
            row = 0;
        }
        if (+o.RowLocation !== row) {
            o.RowLocation = row.toString();
        }
        row++;
    }
}());

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

You could use global variables instead if the closure, maybe this works for you.

var array = [{ Id: "a", ColumnLocation: "0", RowLocation: "0" }, { Id: "b", ColumnLocation: "0", RowLocation: "1" }, { Id: "4", ColumnLocation: "0", RowLocation: "3" }, { Id: "c", ColumnLocation: "1", RowLocation: "0" }, { Id: "d", ColumnLocation: "1", RowLocation: "2" }, { Id: "e", ColumnLocation: "2", RowLocation: "0" }, { Id: "e", ColumnLocation: "2", RowLocation: "2" }],
    col,
    row;

array.forEach(function (o) {
    if (col !== o.ColumnLocation) {
        col = o.ColumnLocation;
        row = 0;
    }
    if (+o.RowLocation !== row) {
        o.RowLocation = row.toString();
    }
    row++;
});

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }