How to display data from AxiosHttp in AgGridAlpine

[xuoguoto]

Hello,

First of all let me thank all the devs for this excellent product and beautiful new way to build web apps. I read about the project in Hacker News and trying it out.

My objective is to fetch data fromhttp://jsonplaceholder.typicode.com/users/1 and display it in a table.

I have created a request and its getting called from onInit but I am not able to figure out how to map the data from AxiosHttp into AgGridAlpine columns.

The output from the HTTP request is as follows:

{ 
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

and my table definition is as follows:

         - id: table_card
            type: Card
            properties:
              title: List of users in json placeholder API
            blocks:
              - id: table
                type: AgGridAlpine
                properties:
                  theme: basic
                  rowData:
                    _request: get_users
                  defaultColDef:  
                    sortable: true
                    resizable: true
                    filter: true  
                  columnDefs:
                    - headerName: Name
                      field: name
                      width: 350
                    - headerName: Username
                      field: username
                      width: 100

request is

requests:
  - id: get_users
    type: AxiosHttp
    connectionId: jsonplaceholder_api
    properties:
      url: http://jsonplaceholder.typicode.com/users/1

Full project is available at https://github.com/xuoguoto/testui

Thanks for your help!

Cheers!

[SamTolmay]

Hi

Thanks for trying things out, and for being the first to ask a question here!

The AgGrid tables expect an array of data items, one for each row in the table, while your request returns an object.

This should render

         - id: table_card
            type: Card
            properties:
              title: List of users in json placeholder API
            blocks:
              - id: table
                type: AgGridAlpine
                properties:
                  theme: basic
                  rowData:
                    - _request: get_users # Note the "-" (this creates a 1 element array)
                  defaultColDef:  
                    sortable: true
                    resizable: true
                    filter: true  
                  columnDefs:
                    - headerName: Name
                      field: name
                      width: 350
                    - headerName: Username
                      field: username
                      width: 100

But this will only have a single row.

The Descriptions block might be a better fit.

(I see it isn't rendering properly in the docs, it should look like a table when bordered = true. See here

[xuoguoto]

Thanks a lot for your answer!

I hope there will be some more posts by me in this forum till I get a hang of lowdefy!

I made the change as suggested, but still data is not being rendered in table. Previously there used to be an error in js console of browser, but now that's gone.

Currently the table looks like this:

Will the columnDefs.field correctly take the name field from the input data?

[SamTolmay]

Hi xuoguoto

The AxiosHttp request returns an object with data, headers, status, and statusText as fields. So we need to give the data field to AgGrid. We can do this with the _get operator.

id: table
type: AgGridAlpine
properties:
  theme: basic
  rowData:
    - _get:
        key: data
        from:
          _request: get_users

It is useful to use the _log operator here. So you could do:

rowData:
  _log:
    _request: get_users

This will log the return value of _request: get_users, and then you would be able to see you need to get the data field.

The get_users request is only returning one user, so we still need the "-" to create an array. If you changed the URL to http://jsonplaceholder.typicode.com/users, the it would return an array, and the data mapping would change to

  rowData:
    _get:
      key: data
      from:
        _request: get_users

[xuoguoto]

I did try to work with Descriptions too, but I think I still did not get a hang of how the data from requests can be fed into items field of Descriptions or into rowData of AgGrid.

This is how my Descriptions look currently:

          - id: user_list
            type: Descriptions
            properties:
              column: 2
              title: List of users in json placeholder API
              items:
                - _request: get_users

Obviously its not working :)

Even though my request has only one item now, next in line is to get an array of records and display in a row each.

[SamTolmay]

The Descriptions block either takes an object, or array of label, value pairs for its items property. So you can do a few different things here:

To show all the fields returned by the request, with the keys in the request as names:

properties:
  items:
    _get:
      key: data
      from:
        _request: get_users

To rename the fields, and only show certain fields.

properties:
  items:
    - label: Name
      value: 
        _get:
          key: data.name
          from:
            _request: get_users
    - label: Username
      value: 
        _get:
          key: data.username
          from:
            _request: get_users

[xuoguoto]

Thanks a lot! Its working now. On to reading more docs and exploration!