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

Question

I'm quite new to javascript and ag-grid and have been following what's in the tutorial to move forward.

in ag-grid's tutorial, remote data can be fetched using the code below:

  // 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);
      });

But what if I want to use data from an api call? say the JSON response from this URI: https://api.opencritic.com/api/game/1520

Hope someone can shed some light. Thanks!

Answer 1

You can perform whatever transformation you need on the data before passing it to 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);

  })

---

According to your comment you're getting an object {} instead of an array [] for discounts . I'd recommend you fix this on the API side so you get an array back to begin with, but assuming that's not possible it's trivial to convert it.

Given an object x , calling Object.values(x) will get you an array of the, well, values in x . For example:

const x = {
  foo: 'a',
  bar: 'b',
  baz: 'c',
}

const v = Object.values(x);

// v is now ['a', 'b', 'c']

The values can be objects too. You get back an array of objects:

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 }]

Now that you have an array, you can use array methods like map to transform it:

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

Note: All of these examples are using the implicit return syntax for arrow functions .

If you prefer, you can use destructuring to tighten up the above expression. The expression below is functionally equivalent to the one above, without the repetition of "value". It doesn't make much difference in this case but it starts to add up if you need multiple fields from the input object.

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

Destructuring also provides a mechanism for renaming a field on the way in. The example below renames bang to x and returns an object with an x property:

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

You can do this shorthand destructuring/renaming with multiple fields. Here we're renaming bang to x , label to y , and returning a new object with those properties:

// 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'}]

Using this approach you can remap the BasePrice and SalePrice fields in your discounts object to whatever format you need. In the example below I'm remapping them to an array of objects with x and y properties. I don't know that that's what agGrid expects, but tweaking it to suit your needs should be straightforward.

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