how to create a seating layout for bus react native

user_8860712 0
Viewed 1659

I was wondering to create seat layout for the bus. So, I found this link which show how to create the map of seats.

So following is the response I get from API

{"seats":[{"width":1,"fare":"","zIndex":0,"number":"A1","type":"A1","serviceTaxAmount":"0","convenience_charge":"0","commission":"","operatorServiceChargeAbsolute":"","operatorServiceChargePercent":"0","totalFareWithTaxes":"","ladiesSeat":"","bookedBy":"","ac":"true","sleeper":"","serviceTaxPer":"0","available":"","length":1,"id":"A1","seatid":"A1","row":0,"column":1},{"width":1,"fare":"1000","zIndex":0,"number":"A3","type":"A3","serviceTaxAmount":"0","convenience_charge":"0","commission":"","operatorServiceChargeAbsolute":"","operatorServiceChargePercent":"0","totalFareWithTaxes":"1000","ladiesSeat":"","bookedBy":"","ac":"true","sleeper":"","serviceTaxPer":"0","available":"1","length":1,"id":"A3","seatid":"A3","row":2,"column":1}]}

this is what I did so far

componentDidMount() {
return fetch(seat_url)
  .then((response) => response.json())
  .then((responseJson) => {

    this.setState({
      isLoading: false,
      row: responseJson.seats.row,
      column: responseJson.seats.column,
    }, function() {
    });

  })
  .catch((error) => {
    console.error(error);
  });

 }

So how to use the above response in adjacent with ROWS and COLS because rows and cols will not be constant it will be dynamic on each row and column. In Example provided from above link cols and rows are fixed. I want to access them dynamically.

react-native api
1 Answers

Use table component & create Rows, Columns. Install below package npm install react-native-table-component

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
let myData1= [];
const rowData1= [];
const type_data= [];
let row_length=[];

let col_length=[];
let type_length=[];
let row_count,col_count,a,b,c,d;
componentDidMount() {


return fetch(seat_url)
  .then((response) => response.json())
  .then((responseJson) => {
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

      var resultresponse = responseJson.result;
    for (var i in resultresponse) {

      var seatresponse = resultresponse[i].seats;
      for(var j in seatresponse)
      {

        myData1.push(seatresponse[j]);
        row_length.push(seatresponse[j].row);
        col_length.push(seatresponse[j].column);
        type_length.push(seatresponse[j].type);
        rowData1.push(`${seatresponse[j].row},${seatresponse[j].column}`);

      }
    }
    row_count = Array.from(new Set(row_length));
    col_count = Array.from(new Set(col_length));
    a = row_count.length.toString();
    b = col_count.length.toString();
    c = row_length.length.toString();
    d = col_length.length.toString();

})
}
render() {
const state = this.state;
const tableData1 = [];
const tableData = [];
for (let i = 1; i <= b; i ++) {
rowData = [];
rowData2 = [];

// If table row & col matches with your response row & col then, push the data else assign as NULL. for (let j = 0; j < a; j ++) { rowData.push(${j},${i}); for (let k = 0; k <= rowData1.length && k<=type_length.length; k ++) { if(${j},${i} === rowData1[k]) { rowData[rowData.indexOf(${j},${i})] = myData1[k]; }

  }
  for (let l = 0; l <= rowData1.length; l ++) {
    if(`${j},${i}` != rowData1[l])
    {
      rowData[rowData.indexOf(`${j},${i}`)] = 'NULL';
    }
  }
}
tableData.push(rowData);
}

return (

  <View style={styles.MainContainer}>
    <Table borderStyle={{borderColor: 'transparent'}}  >
      <Row  style={styles.head} textStyle={styles.text}/>
      {
          tableData.map((rowData, index) => (
           <TableWrapper key={index} style={styles.row}>
           {
          rowData.map((cellData, cellIndex) => (
            <Cell style={{backgroundColor: 'orange', margin:5, height:40, width:40}}  key={cellIndex} data={cellData.type} />
          ))
      }
      </TableWrapper>
      ))
     }
  </Table>
 </View>

    );
    }
user_104168570
Related