How to change JSON data Dynamically from with Javascript

Question

I have an algorithm problem with JSON data to produce what I want.

I get some JSON data which I need to modify and display in client side with JS

JSON data:

[
  {
    "ISTNO": "0000",
    "ATWCAN": "A",
    "COLNAME": "A1"
  },
  {
    "ISTNO": "0000",
    "ATWCAN": "B",
    "COLNAME": "A1"
  },
  {
    "ISTNO": "0000",
    "ATWCAN": "A",
    "COLNAME": "A1"
  },
  {
    "ISTNO": "0001",
    "ATWCAN": "D33D",
    "COLNAME": "B12"
  },
  {
    "ISTNO": "0002",
    "ATWCAN": "GG14",
    "COLNAME": "C1C"
  },
  {
    "ISTNO": "0003",
    "ATWCAN": "FFF-13",
    "COLNAME": "C13"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "F",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "ABB",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "AAA",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "AABA",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0005",
    "ATWCAN": "",
    "COLNAME": "E1"
  },
  {
    "ISTNO": "0006",
    "ATWCAN": "AGA",
    "COLNAME": "G1"
  },
  {
    "ISTNO": "0007",
    "ATWCAN": "",
    "COLNAME": "AFA"
  },
  {
    "ISTNO": "0008",
    "ATWCAN": "ABA",
    "COLNAME": "FFFX"
  },
  {
    "ISTNO": "0008",
    "ATWCAN": "ATR",
    "COLNAME": "FFFX"
  },
  {
    "ISTNO": "0009",
    "ATWCAN": "BAB",
    "COLNAME": "BB"
  },
  {
    "ISTNO": "0009",
    "ATWCAN": "ABA",
    "COLNAME": "BB"
  },
  {
    "ISTNO": "0009",
    "ATWCAN": "ABBA",
    "COLNAME": "BB"
  }
]

My desired result:

I need this table above so I need change data with JS

I tried to do it but it works wrong.

https://jsfiddle.net/ah04b2f9/6/

    var aElements = [];
  var maxRow = 4;
  for (var i = 0; i < maxRow; i++) {
    var oElement = [];
    for (var t = 0; t < objData.length; t++) {
      if (objData[t + 1] !== undefined) {
        while (objData[t].ISTNO === objData[t + 1].ISTNO) {
          if (objData[t].Flag !== "X") {
            oElement[objData[t].COLNAME] = objData[t].ATWCAN;
          }
          objData[t + 1].Flag = "X";
          objData.splice(t, 1);
          t++;
          if (objData[objData.length - 1] === objData[t]) {
            break;
          }
        }
      } else {
        // oElement[objData[t].COLNAME] = objData[t].ATWCAN;
      }

      if (objData[t].Flag2 !== "X" && objData[t].Flag !== "X") {
        oElement[objData[t].COLNAME] = objData[t].ATWCAN;
        objData[t].Flag2 = "X";
      } else {
        //oElement[objData[t].COLNAME] = objData[t].ATWCAN;
      }

    }

    for (var a1 = 0; a1 < objData.length; a1++) {
      objData[a1].Flag = undefined;
    }

    aElements.push(oElement);
  }
  console.log(aElements);
}

question from:https://stackoverflow.com/questions/65872964/how-to-change-json-data-dynamically-from-with-javascript

Answer 1

Here's a simplified method that:

A. determines row index of every object in the json array

B. forms an array of objects (one object per row) that contain the desired "column name: value" pairs.

It should be straightforward to convert this array into an HTML table.

const jsonData = [
  {
    "ISTNO": "0000",
    "ATWCAN": "A",
    "COLNAME": "A1"
  },
  {
    "ISTNO": "0000",
    "ATWCAN": "B",
    "COLNAME": "A1"
  },
  {
    "ISTNO": "0000",
    "ATWCAN": "A",
    "COLNAME": "A1"
  },
  {
    "ISTNO": "0001",
    "ATWCAN": "D33D",
    "COLNAME": "B12"
  },
  {
    "ISTNO": "0002",
    "ATWCAN": "GG14",
    "COLNAME": "C1C"
  },
  {
    "ISTNO": "0003",
    "ATWCAN": "FFF-13",
    "COLNAME": "C13"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "F",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "ABB",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "AAA",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0004",
    "ATWCAN": "AABA",
    "COLNAME": "D1"
  },
  {
    "ISTNO": "0005",
    "ATWCAN": "",
    "COLNAME": "E1"
  },
  {
    "ISTNO": "0006",
    "ATWCAN": "AGA",
    "COLNAME": "G1"
  },
  {
    "ISTNO": "0007",
    "ATWCAN": "",
    "COLNAME": "AFA"
  },
  {
    "ISTNO": "0008",
    "ATWCAN": "ABA",
    "COLNAME": "FFFX"
  },
  {
    "ISTNO": "0008",
    "ATWCAN": "ATR",
    "COLNAME": "FFFX"
  },
  {
    "ISTNO": "0009",
    "ATWCAN": "BAB",
    "COLNAME": "BB"
  },
  {
    "ISTNO": "0009",
    "ATWCAN": "ABA",
    "COLNAME": "BB"
  },
  {
    "ISTNO": "0009",
    "ATWCAN": "ABBA",
    "COLNAME": "BB"
  }
];

// determine row index of each object in jsonData array
let lastIstno;
let row = 0;
const dataWithRows = jsonData.map(el => {
  const istno = el.ISTNO;
  row = (istno !== lastIstno) ? 0 : row + 1;
  lastIstno = istno;
  return { iRow: row, ...el };
});



// create array of objects (one object per row)
// containing `COLNAME : ATWCAN` pairs
const results = dataWithRows.reduce((acc, item) => {
  if (typeof acc[item.iRow] === 'undefined') {
    acc[item.iRow] = {};
  }
  acc[item.iRow][item.COLNAME] = item.ATWCAN;
  return acc;
}, []);

const pre = document.querySelector('pre');
pre.innerText = `dataWithRows: ` +
  JSON.stringify(dataWithRows, null, 2);
pre.innerText += '

results: ' + JSON.stringify(results, null, 2);

<pre></pre>