如何使用 javascript 将来自剩余响应的数据用于 ag-grid？

Question

我是 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

希望有人能给出一些启示。谢谢！

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) 会得到一个 values in 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]

注意：所有这些示例都使用 implicit return syntax for arrow functions。

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

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

解构还提供了一种重命名字段的机制。下面的示例将 bang 重命名为 x 和 returns 具有 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}]

您可以对多个字段执行此操作 shorthand destructuring/renaming。在这里，我们将 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>

如何使用 javascript 将来自剩余响应的数据用于 ag-grid？

How do I use data from a rest response into ag-grid using javascript?

javascript

ag-grid