[英]How to parse paginated JSON API response with complex nesting and unnamed array?
我已經(在@EmielZuurbier 的幫助下)構建了一個發票模板,該模板將 API 調用放置到 Quickbase。 API 響應是分頁的。 如何將分頁響應解析為單個表?
這是來自 API 調用的響應的樣子(我刪除了 data 下的大部分項目,否則在 stackoverflow 上發布會很長時間
{
"data": [
{
"15": {
"value": "F079427"
},
"19": {
"value": 50.0
},
"48": {
"value": "(S1)"
},
"50": {
"value": "2021-03-01"
},
"8": {
"value": "71 Wauregan Rd, Danielson, Connecticut 06239"
}
},
{
"15": {
"value": "F079430"
},
"19": {
"value": 50.0
},
"48": {
"value": "(S1)"
},
"50": {
"value": "2021-03-01"
},
"8": {
"value": "7 County Home Road, Thompson, Connecticut 06277"
}
},
{
"15": {
"value": "F079433"
},
"19": {
"value": 50.0
},
"48": {
"value": "(S1)"
},
"50": {
"value": "2021-03-16"
},
"8": {
"value": "12 Bentwood Street, Foxboro, Massachusetts 02035"
}
}
],
"fields": [
{
"id": 15,
"label": "Project Number",
"type": "text"
},
{
"id": 8,
"label": "Property Adress",
"type": "address"
},
{
"id": 50,
"label": "Date Completed",
"type": "text"
},
{
"id": 48,
"label": "Billing Codes",
"type": "text"
},
{
"id": 19,
"label": "Total Job Price",
"type": "currency"
}
],
"metadata": {
"numFields": 5,
"numRecords": 500,
"skip": 0,
"totalRecords": 766
}
}
以下是我正在使用的完整 javascript 代碼
const urlParams = new URLSearchParams(window.location.search);
//const dbid = urlParams.get('dbid');//
//const fids = urlParams.get('fids');//
let rid = urlParams.get('rid');
//const sortLineItems1 = urlParams.get('sortLineItems1');//
//const sortLineItems2 = urlParams.get('sortLineItems2');//
let subtotalAmount = urlParams.get('subtotalAmount');
let discountAmount = urlParams.get('discountAmount');
let creditAmount = urlParams.get('creditAmount');
let paidAmount = urlParams.get('paidAmount');
let balanceAmount = urlParams.get('balanceAmount');
let clientName = urlParams.get('clientName');
let clientStreetAddress = urlParams.get('clientStreetAddress');
let clientCityStatePostal = urlParams.get('clientCityStatePostal');
let clientPhone = urlParams.get('clientPhone');
let invoiceNumber = urlParams.get('invoiceNumber');
let invoiceTerms = urlParams.get('invoiceTerms');
let invoiceDate = urlParams.get('invoiceDate');
let invoiceDueDate = urlParams.get('invoiceDueDate');
let invoiceNotes = urlParams.get('invoiceNotes');
const formatCurrencyUS = function (x) {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(x);
}
let subtotalAmountFormatted = formatCurrencyUS(subtotalAmount);
let discountAmountFormatted = formatCurrencyUS(discountAmount);
let creditAmountFormatted = formatCurrencyUS(creditAmount);
let paidAmountFormatted = formatCurrencyUS(paidAmount);
let balanceAmountFormatted = formatCurrencyUS(balanceAmount);
document.getElementById("subtotalAmount").innerHTML = `${subtotalAmountFormatted}`;
document.getElementById("discountAmount").innerHTML = `${discountAmountFormatted}`;
document.getElementById("creditAmount").innerHTML = `${creditAmountFormatted}`;
document.getElementById("paidAmount").innerHTML = `${paidAmountFormatted}`;
document.getElementById("balanceAmount").innerHTML = `${balanceAmountFormatted}`;
document.getElementById("clientName").innerHTML = `${clientName}`;
document.getElementById("clientStreetAddress").innerHTML = `${clientStreetAddress}`;
document.getElementById("clientCityStatePostal").innerHTML = `${clientCityStatePostal}`;
document.getElementById("clientPhone").innerHTML = `${clientPhone}`;
document.getElementById("invoiceNumber").innerHTML = `${invoiceNumber}`;
document.getElementById("invoiceTerms").innerHTML = `${invoiceTerms}`;
document.getElementById("invoiceDate").innerHTML = `${invoiceDate}`;
document.getElementById("invoiceDueDate").innerHTML = `${invoiceDueDate}`;
document.getElementById("invoiceNotes").innerHTML = `${invoiceNotes}`;
let headers = {
'QB-Realm-Hostname': 'XXXXX',
'User-Agent': 'Invoice',
'Authorization': 'XXXXX',
'Content-Type': 'application/json'
}
let body =
{
"from": "bq9dajvu5",
"select": [
15,
8,
50,
48,
19
],
"where": `{25.EX.${rid}}`,
"sortBy": [
{
"fieldId": 50,
"order": "ASC"
},
{
"fieldId": 8,
"order": "ASC"
}
],
"options": {
"skip": 0
}
}
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);
console.log(line_items);
const transformResponseData = (line_items) => {
const { data, fields } = line_items;
//***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 {
...line_items,
data: revivedData
};
};
const createTable = ({ data, fields }) => {
const table = document.getElementById('line_items'); //const table = document.createElement('table');
const tHead = document.getElementById('line_items_thead'); //const tHead = table.createTHead();
const tBody = document.getElementById('line_items_tbody'); //const tBody = table.createTBody();
//***Create a head for each label in the fields array***//
const tHeadRow = tHead.insertRow();
// ***Create the counts cell manually***//
const tHeadRowCountCell = document.createElement('th');
tHeadRowCountCell.textContent = 'Count';
tHeadRow.append(tHeadRowCountCell);
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 === 5 ?
Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value) ://value.toFixed(2) :
value;
}
}
return table;
};
const data = transformResponseData(line_items);
const table = createTable(data);
document.getElementById("line_items_div").append(table) //.innerHTML = table <-- this does not work// //document.body.append(table);
console.log(data);
}
};
xmlHttp.send(JSON.stringify(body));
這就是我想要實現的(地址僅顯示為 xxx,因此該表非常適合 stackoverflow)
數數 | 項目編號 | 物業地址 | 完成日期 | 帳單代碼 | 總工作價格 |
---|---|---|---|---|---|
1 | F079427 | xxx | 2021-03-01 | (S1) | $50.00 |
2 | F079430 | xxx | 2021-03-01 | (S1) | $50.00 |
3 | F079433 | xxx | 2021-03-16 | (S1) | $50.00 |
我對如何實現這一點的想法
對於請求公式,我們可能需要一個 function 循環,它將跳過=== to the sum of all the numRecords for every request made until skip + numRecords === totalRecords
例如,如果 totalRecords = 1700
{"skip": 0}
返回 numRecords=500{"skip": 500}
返回 numRecords=500{"skip": 1000}
返回 numRecords=500{"skip": 1500}
返回 numRecords=200 在第四個請求中, skip + numRecords = 1700
等於總記錄數,因此循環應該停止。
在我們擁有所有這些 arrays 之后,我們以某種方式將它們合並到一個表中,這比我熟悉的 javascript 更先進。
你的想法是正確的。 API 指示根據響應元數據中的totalRecords
和numRecords
值在請求中使用skip
功能。
要設置它,您需要三個部分。
首先,你的headers
和body
。 headers
將保持不變,因為它們對於每個請求都需要相同。
body
會得到 skip 值,但是這個值對於每個請求都是不同的,所以我們會在發出請求時添加該部分。
const headers = {
'QB-Realm-Hostname': 'XXXXX',
'User-Agent': 'Invoice',
'Authorization': 'XXXXX',
'Content-Type': 'application/json'
};
const body = {
"from": "bq9dajvu5",
"select": [
15,
8,
50,
48,
19
],
"where": `{25.EX.${rid}}`,
"sortBy": [
{
"fieldId": 50,
"order": "ASC"
},
{
"fieldId": 8,
"order": "ASC"
}
] // options object will be added later.
};
第二部分是重寫您的請求腳本,以便我們可以傳遞一個skip
值並將其放入請求的正文中。 我確實看到您使用XMLHttpRequest()
,但我建議您查看更新的 Fetch API。 它基本上是相同的,但有不同的,在我看來,更易讀的語法。
因為skip
值是動態的,我們通過將body
object 的屬性與保存skip
屬性和值的options
屬性相結合來構建請求的body
。
/**
* Makes a single request to the records/query endpoint.
* Expects a JSON response.
*
* @param {number} [skip=0] Amount of records to skip in the request.
* @returns {any}
*/
const getRecords = async (skip = 0) => {
const url = 'https://api.quickbase.com/v1/records/query';
// Make the request with the skip value included.
const response = await fetch(url, {
method: 'POST',
headers,
body: JSON.stringify({
...body,
"options": {
"skip": skip
}
})
});
// Check if the response went okay, if not, throw an error.
if (!response.ok) {
throw new Error(`
The getRecords request has failed:
${response.status} - ${response.statusText}
`);
}
// Decode the body of the response
const payload = await response.json();
return payload;
};
最后一部分是關於確保getRecords
function 在需要來自 API 的更多記錄時不斷被調用。
為此,我創建了一個遞歸 function ,這意味着它會一直調用自己,直到滿足條件。 在這種情況下,我們將繼續調用 function 直到沒有更多記錄可獲取。
每當不再發出請求時,它將返回一個 object,這與原始響應類似,但將所有data
arrays 組合在一起。
因此,這意味着您將擁有相同的結構,並且不必做任何額外的事情來展平或重組 arrays 來創建表。
/**
* Recursive function which keeps getting more records if the current amount
* of records is below the total. Then skips the amount already received
* for each new request, collecting all data in a single object.
*
* @param {number} amountToSkip Amount of records to skip.
* @param {object} collection The collection object.
* @returns {object} An object will all data collected.
*/
const collectRecords = async (amountToSkip = 0, collection = { data: [], fields: [] }) => {
try {
const { data, fields, metadata } = await getRecords(amountToSkip);
const { numRecords, totalRecords, skip } = metadata;
// The amount of collected records.
const recordsCollected = numRecords + skip;
// The data array should be merged with the previous ones.
collection.data = [
...collection.data,
...data
];
// Set the fields the first time.
// They'll never change and only need to be set once.
if (!collection.fields.length) {
collection.fields = fields;
}
// The metadata is updated for each request.
// It might be useful to know the state of the last request.
collection.metadata = metadata;
// Get more records if the current amount of records + the skip amount is lower than the total.
if (recordsCollected < totalRecords) {
return collectRecords(recordsCollected, collection);
}
return collection;
} catch (error) {
console.error(error);
}
};
現在要使用它,您調用collectRecords
function 然后它會繼續發出請求,直到沒有更多請求為止。 此 function 將返回Promise
,因此您必須使用Promise
的then
方法來告訴您在檢索到所有記錄時要做什么。
這就像等待一切完成,然后對數據做一些事情。
// Select the table div element.
const tableDiv = document.getElementById('line_items_div');
// Get the records, collect them in multiple requests, and generate a table from the data.
collectRecords().then(records => {
const data = transformRecordsData(records);
const table = createTable(data);
tableDiv.append(table);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.