如何使用 Javascript 动态更改 JSON 数据

如何解决如何使用 Javascript 动态更改 JSON 数据

我在使用 JSON 数据生成我想要的数据时遇到算法问题。

我得到了一些 JSON 数据，我需要用 JS 修改并在客户端显示这些数据

JSON 数据：

[
  {
    "ISTNO": "0000","ATWCAN": "A","COLNAME": "A1"
  },{
    "ISTNO": "0000","ATWCAN": "B",{
    "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"
  },"ATWCAN": "ABB","ATWCAN": "AAA","ATWCAN": "AABA",{
    "ISTNO": "0005","ATWCAN": "","COLNAME": "E1"
  },{
    "ISTNO": "0006","ATWCAN": "AGA","COLNAME": "G1"
  },{
    "ISTNO": "0007","COLNAME": "AFA"
  },{
    "ISTNO": "0008","ATWCAN": "ABA","COLNAME": "FFFX"
  },"ATWCAN": "ATR",{
    "ISTNO": "0009","ATWCAN": "BAB","COLNAME": "BB"
  },"ATWCAN": "ABBA","COLNAME": "BB"
  }
]

我想要的结果：

我需要上面这张表，所以我需要用 JS 更改数据

我尝试过，但效果不好。

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

解决方法

这是一个简化的方法：

A.确定json数组中每个对象的行索引

B.形成一个对象数组（每行一个对象），其中包含所需的“列名：值”对。

将此数组转换为 HTML 表格应该很简单。

const jsonData = [
  {
    "ISTNO": "0000","ATWCAN": "A","COLNAME": "A1"
  },{
    "ISTNO": "0000","ATWCAN": "B",{
    "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"
  },"ATWCAN": "ABB","ATWCAN": "AAA","ATWCAN": "AABA",{
    "ISTNO": "0005","ATWCAN": "","COLNAME": "E1"
  },{
    "ISTNO": "0006","ATWCAN": "AGA","COLNAME": "G1"
  },{
    "ISTNO": "0007","COLNAME": "AFA"
  },{
    "ISTNO": "0008","ATWCAN": "ABA","COLNAME": "FFFX"
  },"ATWCAN": "ATR",{
    "ISTNO": "0009","ATWCAN": "BAB","COLNAME": "BB"
  },"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 += '\n\nresults: ' + JSON.stringify(results,2);

<pre></pre>

,

这是一个基于两个简单辅助函数的版本。 group 接受一个函数并返回一个新函数，该函数接受一个数组并将该数组的元素分组为函数产生相同值的子数组。当我们用 x => x .COLNAME 调用它时，我们会将原始数据分组到列中。

transpose 在其主对角线上翻转一个数组，用 undefined 填充缺失的条目。这会将我们的列数组转换为行数组。

我们的主要函数 restructure 从数据中提取唯一的标题，然后组合 group 和 transpose 来创建我们的行列表。它看起来像这样：

// utility functions
const group = (fn) => (xs) =>
  Object .values (xs .reduce (
    (a,x) => ((a [fn (x)] = [... (a [fn (x)] || []),x]),a),{}
  ))

const transpose = m => 
  m [0] .map ((c,i) => m .map (r => r [i]))


// main function
const restructure = (xs) => ({
  headers: [... new Set (xs .map (x => x.COLNAME))],rows: transpose (group (x => x.COLNAME) (xs) .map (x => x .map (y => y .ATWCAN)))
})


// sample data
const input = [{ISTNO: "0000",ATWCAN: "A",COLNAME: "A1"},{ISTNO: "0000",ATWCAN: "B",{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"},ATWCAN: "ABB",ATWCAN: "AAA",ATWCAN: "AABA",{ISTNO: "0005",ATWCAN: "",COLNAME: "E1"},{ISTNO: "0006",ATWCAN: "AGA",COLNAME: "G1"},{ISTNO: "0007",COLNAME: "AFA"},{ISTNO: "0008",ATWCAN: "ABA",COLNAME: "FFFX"},ATWCAN: "ATR",{ISTNO: "0009",ATWCAN: "BAB",COLNAME: "BB"},ATWCAN: "ABBA",COLNAME: "BB"}]


// demo
console .log (restructure (input))

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

从这个输出中，应该很容易创建一个表。这里我们有一个函数，它使用简单的字符串操作和 innerHTML 将结果添加到 DOM。但是，无论您使用何种前端技术，您都应该能够构建类似的东西。

const makeTable = (xs,{headers,rows} = restructure(xs)) => 
`<table>
  <thead>
    <tr>${headers .map (h => `<th>${h}</th>`) .join ('')}</tr>
  </thead>
  <tbody>
    ${rows .map (
      row => `<tr>${row .map (
        cell => `<td>${cell || ''}</td>`
      ) .join ('')}</tr>`
    ) .join ('\n    ')}
  </tbody>
</table>`

document .getElementById ('result') .innerHTML = makeTable (input)

table {border-collapse: collapse} td,th {border: 1px solid black; padding: .5em} th {background: #ccc}

<div id="result"></div>
<script>const group = (fn) => (xs) => Object .values (xs .reduce ((a,{})); const transpose = m => m [0] .map ((c,i) => m .map (r => r [i])); const restructure = (xs) => ({headers: [... new Set (xs .map (x => x.COLNAME))],rows: transpose (group (x => x.COLNAME) (xs) .map (x => x .map (y => y .ATWCAN)))}); const input = [{ISTNO: "0000",COLNAME: "BB"}]</script>

这个解决方案的重要之处在于它将我们的工作分解成可管理的块。在此过程中，我们创建了两个有用的函数，可以在许多项目中重用这些函数。