[英]How do I use data from a rest response into ag-grid using javascript?
我對 javascript 和 ag-grid 很陌生,並且一直在按照教程中的內容繼續前進。
在 ag-grid 的教程中,可以使用以下代碼獲取遠程數據:
// fetch the row data to use and one ready provide it to the Grid via the Grid API
agGrid.simpleHttpRequest({url: 'https://www.ag-grid.com/example-assets/row-data.json'})
.then(data => {
gridOptions.api.setRowData(data);
});
但是,如果我想使用來自 api 調用的數據怎么辦? 說來自這個 URI 的 JSON 響應: https://api.opencritic.com/api/game/1520
希望有人可以闡明。 謝謝!
在將數據傳遞給 setRowData 之前,您可以對數據執行所需的任何轉換:
agGrid.simpleHttpRequest( ... )
.then(data => {
// transform the data into whatever format you need
const rowData = data.reduce(...) // or whatever. not _necessarily_ reduce
gridOptions.api.setRowData(rowData);
})
根據您的評論,您將獲得 object {}
而不是數組[]
的discounts
。 我建議你在 API 端解決這個問題,這樣你就可以重新開始一個數組,但假設這是不可能的,轉換它是微不足道的。
給定一個 object x
,調用Object.values(x)將為您提供一個x
中的值數組。 例如:
const x = {
foo: 'a',
bar: 'b',
baz: 'c',
}
const v = Object.values(x);
// v is now ['a', 'b', 'c']
這些值也可以是對象。 你得到一個對象數組:
const x = {
foo: { label: 'a', bang: 1 },
bar: { label: 'b', bang: 2 },
baz: { label: 'c', bang: 3 },
}
const v = Object.values(x);
// [{ label: 'a', bang: 1 }, { label: 'b', bang: 2 }, { label: 'c', bang: 3 }]
現在你有了一個數組,你可以使用像map這樣的數組方法來轉換它:
const bangs = v.map(value => value.bang);
// [1, 2, 3]
如果您願意,可以使用解構來加強上述表達式。 下面的表達式在功能上等同於上面的表達式,沒有重復“值”。 在這種情況下並沒有太大區別,但如果您需要輸入 object 中的多個字段,它就會開始累加。
const bangs = v.map(({bang}) => bang);
// [1, 2, 3]
解構還提供了一種在進入時重命名字段的機制。下面的示例將bang
重命名為x
並返回帶有x
屬性的 object:
// v = [{ label: 'a', bang: 1 }, { label: 'b', bang: 2 }, { label: 'c', bang: 3 }]
const bangs = v.map(({bang: x}) => ({x}));
// [{x: 1}, {x: 2}, {x: 3}]
您可以使用多個字段執行此速記解構/重命名。 在這里,我們將bang
重命名為x
, label
重命名為y
,並返回具有這些屬性的新 object :
// v = [{ label: 'a', bang: 1 }, { label: 'b', bang: 2 }, { label: 'c', bang: 3 }]
const bangs = v.map(({bang: x, label: y}) => ({x, y}));
// [{x: 1, y: 'a'}, {x: 2, y: 'b'}, {x: 3, y: 'c'}]
使用這種方法,您可以將discounts
object 中的BasePrice
和SalePrice
字段重新映射為您需要的任何格式。 在下面的示例中,我將它們重新映射到具有x
和y
屬性的對象數組。 我不知道這就是 agGrid 所期望的,但調整它以滿足您的需求應該很簡單。
// function that converts the sample data format to an array of // coordinates, eg [{ x: 555, y: 999 }, { x: 123, y: 456 }] function transform (input) { return Object.values(input.discounts).map(({BasePrice: x, SalePrice: y}) => ({x, y})) } fakeApiRequest() // simulate the request.then(apiData => { const rowData = transform(apiData); // transform the response data show(rowData); // show the result }) //------- // everything below is just utility and convenience stuff // for the demo. mostly irrelevant/ignorable for your purposes //------- // sample data const sampleData = { "discounts": { "0": { "BasePrice": "1499", "SalePrice": "449" }, "1": { "BasePrice": "1299", "SalePrice": "519" } } } // simulates an api request; waits a moment then resolve with sample data. // not really relevant to your issue; just hand-waving for the demo async function fakeApiRequest () { return new Promise(resolve => { setTimeout(() => resolve(sampleData), 100) }); } // irrelevant. just a convenience utility for showing the output. function show(d) { document.querySelector('pre').innerHTML = JSON.stringify(d, null, 3); }
<pre></pre>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.