如何解析具有复杂嵌套和未命名数组的 JSON？

Question

我正在尝试弄清楚如何使用 vanilla javascript 解析我在调用特定数据库时收到的 JSON 响应（JSON 响应如下所示）-到目前为止，我还没有任何运气。我正在对 Quickbase 数据库进行 API 调用，他们的 JSON 响应具有标准格式。我正在呼叫的 API 可以在这个 link 中找到：https://developer.quickbase.com/operation/runQuery.

API 调用的响应如下所示

{
    "data": [
        {
            "6": {
                "value": 11.0
            },
            "69": {
                "value": "A"
            },
            "70": {
                "value": "B"
            }
        },
        {
            "6": {
                "value": 11.0
            },
            "69": {
                "value": "C"
            },
            "70": {
                "value": "D"
            }
        }
    ],
    "fields": [
        {
            "id": 6,
            "label": "Related Invoice",
            "type": "numeric"
        },
        {
            "id": 69,
            "label": "TEST1",
            "type": "text"
        },
        {
            "id": 70,
            "label": "TEST2",
            "type": "text"
        }
    ],
    "metadata": {
        "numFields": 3,
        "numRecords": 2,
        "skip": 0,
        "totalRecords": 2
    }
}

这就是我想将其解析成的内容（不需要省略此处未显示的 JSON - 我只是为了清楚起见才这样做）

{
    "data": [
        {
            "Related Invoice":11.0,
            "TEST1":"A",
            "TEST2":"B"
        },
        {
            "Related Invoice":11.0,
            "TEST1":"C",
            "TEST2":"D"
        }
    ]
}

下面是我正在使用的完整 javascript 代码

let headers = {
    'QB-Realm-Hostname': 'XXXXXX',
        'User-Agent': 'Invoice',
    'Authorization': 'XXXXXX',
    'Content-Type': 'application/json'
}

let body = 

{
  "from": "bq2paydp2",
  "select": [
    6,
    69,
    70
  ],
  "where": "{6.EX.11}",
  "sortBy": [
    {
      "fieldId": 6,
      "order": "ASC"
    },
    {
      "fieldId": 69,
      "order": "ASC"
    }
  ]
}


const xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', 'https://api.quickbase.com/v1/records/query', true);
for (const key in headers) {
  xmlHttp.setRequestHeader(key, headers[key]);
}
xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState === XMLHttpRequest.DONE) {
    console.log(xmlHttp.responseText);


let line_items = JSON.parse(this.responseText, dataReviver);

console.log(line_items);

//function dataReviver (key, value) {
//if (key = 6)
//  {
//      var newHeaderName = 99;
//      return newHeaderName;
//  }
//
//  return value;
//} 


//document.getElementById('abc').innerHTML =  line_items.data[0][6].value;
   
function generateTableHead(table,tableData) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of tableData) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
};

function generateTable(table, tableData) {
  for (let element of tableData) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
};


let table = document.querySelector("table");
let tableData = Object.keys(line_items.data[0]);
generateTableHead(table, tableData);
generateTable(table, line_items.data);

  }
};


xmlHttp.send(JSON.stringify(body));

这就是我想要达到的目标

|-----------------------------------------|
| Count | Related Invoice | TEST1 | TEST2 |
|-------|-----------------|-------|-------|
|   1   |       11.0      |   A   |   B   |
|-------|-----------------|-------|-------|      
|   2   |       11.0      |   C   |   D   |
|-----------------------------------------|

我需要完成三件事：

#1 将 "6", "69 and "70" 重命名为对应的 fields.label ( "Related Invoice", "TEST1" and "TEST2" ).
#2 取上面#1（11.0, "A", "B", ...）中对象下嵌套的对象的值，设置为上面#1中对象的值。例如，这将使 6 (Related Invoice) 成为键，11.0 成为值。
#3 我最终想在网页上的 table 中显示它。 html 和 css 我可以处理 Javascript 和 JSON 我不太擅长。

如果您需要我澄清更多信息，请告诉我。

Answer 1

要按照您所看到的方式转换数据，您需要遍历对象中的 data 键并根据循环结果创建一个新数组。

一种方法是使用 Array.prototype.map()。有了这个，您可以遍历数组中的每个项目并 return 一个新值。

在此地图循环中，您将遍历 data 数组中的每个项目。对于每个项目，您需要从 fields 数组中获取 id 和 label 并使用该数组创建一个新对象。要在循环中创建新对象，可以使用 Array.prototype.reduce() 方法。

所以在这种情况下，您将有一个嵌套循环。内部循环将遍历 fields 数组并使用 id 从 data 数组中获取正确的值。然后它 return 是一个对象，其中包含 label 和 value 设置，如您所请求的那样。然后周围的 map 方法将 return 一个包含对象的新数组。 Tadaa，魔法！

const response = {
  "data": [{
      "6": {
        "value": 11.0
      },
      "69": {
        "value": "A"
      },
      "70": {
        "value": "B"
      }
    },
    {
      "6": {
        "value": 11.0
      },
      "69": {
        "value": "C"
      },
      "70": {
        "value": "D"
      }
    }
  ],
  "fields": [{
      "id": 6,
      "label": "Related Invoice",
      "type": "numeric"
    },
    {
      "id": 69,
      "label": "TEST1",
      "type": "text"
    },
    {
      "id": 70,
      "label": "TEST2",
      "type": "text"
    }
  ],
  "metadata": {
    "numFields": 3,
    "numRecords": 2,
    "skip": 0,
    "totalRecords": 2
  }
};

const transformResponseData = (response) => {
  const { data, fields } = response;

  // Return a new array with objects based on the values
  // of the data and fields arrays.
  const revivedData = data.map(entry =>
    fields.reduce((object, { id, label }) => {
      object[label] = entry[id].value;
      return object;
    }, {})
  );

  // Combine the original object with the new data key.
  return {
    ...response,
    data: revivedData
  };
};

const createTable = ({ data, fields }) => {
  const table = document.createElement('table');
  const tHead = table.createTHead();
  const tBody = table.createTBody();

  
  const tHeadRow = tHead.insertRow();
  
  // Create the counts cell manually.
  const tHeadRowCountCell = document.createElement('th');
  tHeadRowCountCell.textContent = 'Count';
  tHeadRow.append(tHeadRowCountCell);
    
  // Create a head for each label in the fields array.
  for (const { label } of fields) {
    const tHeadRowCell = document.createElement('th');
    tHeadRowCell.textContent = label;
    tHeadRow.append(tHeadRowCell);
  }

  // Output all the values of the new data array.
  for (const [index, entry] of data.entries()) {
    const tBodyRow = tBody.insertRow();
    
    // Create a new array with the index and the
    // values from the object.
    const values = [
      index + 1,
      ...Object.values(entry)
    ];

    // Loop over the combined values array.
    for (const [index, value] of values.entries()) {
      const tBodyCell = tBodyRow.insertCell();
      tBodyCell.textContent = index === 1 ?
        value.toFixed(1) :
        value;
    }
  }

  return table;
};

const data = transformResponseData(response);
const table = createTable(data);
document.body.append(table);

如何解析具有复杂嵌套和未命名数组的 JSON？

How parse JSON with complex nesting and unnamed array?

javascript

arrays

json

jsonparser

reviver-function