how to create a seating layout for bus react native - api

Question

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.

Answer 1

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