How to call API in LightningJS?

vishuk570 · January 12, 2022, 5:09am

How to call API and render data in LightningJS?

erikhaandrikman · January 12, 2022, 2:13pm

You can take a look at our opensource VOD example app: GitHub - mlapps/com.metrological.app.vod-example

It hosts logic for doing api calls and populating data in Lighting Views:
Api call on route visit:

mlapps/com.metrological.app.vod-example/blob/abb8e99431878508d64ab2b54f1652fe6679009c/src/lib/routerConfig.js#L52

    
      
                          page.addStrips(createPageComponents(response));
                          return true;
                      })
              },
              widgets: ['menu', 'detail']
          },
          {
              path: 'series',
              component: Main,
              on: async (page) => {
                  getSeriesPage()
                      .then((response) => {
                          page.addStrips(createPageComponents(response));
                          return true;
                      })
              },
              widgets: ['menu', 'detail']
          },
          {
              path: 'search',
              component: Search,

** data population (entry) **

github.com

mlapps/com.metrological.app.vod-example/blob/abb8e99431878508d64ab2b54f1652fe6679009c/src/pages/Main.js#L54

    
      
              $updateItemTitle(e) {
                  this.tag('ItemDescription').item = e;
              }
          
          
    addStrips(array) {
                  if(this._hasData) {
                      return;
                  }
                  this._hasData = true;
                  const content = this.tag('Content');
                  content.add(array);
              }
          
          
    _handleLeft() {
                  Router.focusWidget('Menu');
              }
          }

Or take a look at our opensource router example: GitHub - mlapps/router-example-app it hosts some dummy examples on how to add and API to your codebase and perform certain api calls when accessing a route:

github.com

mlapps/router-example-app/blob/0e84961f4b6f03b592159985a7979307b2eb313c/src/lib/routes.js#L70

    
      
              component: Search,
          },
          {
              // We've created a route with a dynamic name (keyword), this translates to the following;
              // when the browser points to: 127.0.0.1:8080/#home/search/vikings the Router will load
              // the Search Page, and add the property keyword to the instance with the value=>vikings
              // you can add a set keyword(){...} and invoke logic if needed.
              path: 'home/search/:keyword',
              component: Search,
              before(page, {keyword }) {
                  return doSearch(keyword).then((results)=>{
                      page.results = results;
                  })
              },
              widgets: ['Menu', 'Notification'],
              cache: 10
          },
          {
              path: 'account/details/:action',
              component: Account,
              on({page, action }) {

You can address the Router documentation to learn more about the Router plugin:

eduardo.guzman · January 12, 2022, 5:36pm

To make API calls you can use either fetch or axios or any other library (xhr directly even) that works on Javascript.

RajShah · August 5, 2023, 5:13am

You can try one more solution if this is feasible with your example

As @erikhaandrikman has shared the example, you can add a line for the content tag, which always clears the previous response before adding the array data

this.tag('MyList').clear();

Topic		Replies	Views
Make Api to populate widget Get Help	1	366	December 7, 2022
Polling Rest API on a Page Get Help	6	439	August 3, 2023
How to play MPEG-DASH ( .mpd ) file in LightningJS VideoPlayer? Get Help	4	594	January 12, 2022
How can we get the Metrics event data? Get Help	2	284	December 2, 2022
Creating LightningJS custom component help Get Help	0	333	September 4, 2023

How to call API in LightningJS?

Related topics