Reply to Perry: "I need help connecting to a database"


#1

@Perry

on replying to your private message “Ngoc, I am trying hard to learn React and how to work with Database. I would like it if you could help me. I do not know how to query the database to get results on the page of an app …”, I post answer here as a sample, hope it may help you or someone else.

You can show data from db with following steps:

  1. Create local datasheet

  1. Create line item component (messageInfo):

  1. Create Grid Component to display list of all items

  1. Query data from db, then display on list

following sample code showing data into list

//call api to get data
let rmObj = await vzLobbyResolver.mobifaGetRooms(building_id);
if(rmObj) 
{
    checkCode = rmObj.checkCode;
    if (checkCode == 1)
    {
          //no internet
          this.props.appActions.updateDataSlot('ds_signInState', 1);
          return;
    }

    //OK => update to rooms datasheet
    let rmSheet = this.props.appActions.getDataSheet('rooms');
    let itemCount = rmSheet.items.length;

    //before insert data from db, you need to clear fake data
    for (let i = itemCount; i > 0; i--)
    {
        rmSheet.removeItem(rmSheet.items[i-1]);
    }

    //get line by line from crawl data insert into rooms datasheet
   
    rmObj.items.forEach(rmItem => {
        let itm = {};
        itm['block_id'] = rmItem['block_id'];
        itm['floor_id'] = rmItem['floor_id'];
        itm['room_id'] = rmItem['room_id'];
        itm['room_name'] = rmItem['room_name'];
        rmSheet.addItem(itm);
  });
}
  1. When update finish, data auto display on design list, no additional action

cheer :tanabata_tree:


#2

Hi consider this
this.props.appActions.getDataSheet(sheetId)
this.props.appActions.addToDataSheet(sheetId, newRow)
this.props.appActions.updateInDataSheet(sheetId, row)
this.props.appActions.removeFromDataSheet(sheetId, row)