如何使用javascript将rest响应中的数据使用到ag网格中

Question

我对javascript和ag网格很陌生，一直在遵循教程中的内容继续前进。

在ag网格的教程中，可以使用以下代码获取远程数据：

// 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

希望有人能给我们一些启示。谢谢

Answer 1

在将数据传递给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);
})

---

根据您的评论，您得到的是对象{}，而不是discounts的数组[]。我建议你在API端修复这个问题，这样你就可以从一开始就得到一个数组，但假设这是不可能的，那么转换它就很简单了

给定一个对象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]

注意：所有这些示例都使用箭头函数的隐式返回语法。

如果您愿意，可以使用destructuring来收紧上面的表达式。下面的表达式在功能上等同于上面的表达式；值"；。在这种情况下，它没有太大区别，但如果您需要输入对象中的多个字段，它就会开始相加。

const bangs = v.map(({bang}) => bang);
// [1, 2, 3]

Destructuring还提供了一种在进入时重命名字段的机制。下面的示例将bang重命名为x，并返回一个具有x属性的对象：

// 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，并返回一个具有这些属性的新对象：

// 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对象中的BasePrice和SalePrice字段重新映射为所需的任何格式。在下面的示例中，我将它们重新映射为具有x和y属性的对象数组。我不知道这是agGrid所期望的，但调整它以满足您的需求应该很简单。

// function that converts the sample data format to an array of
// coordinates, e.g. [{ 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>