Блог

мы пытаемся извлечь данные из файла json и поместить их в таблицу, чтобы данные отображались красиво. Однако у нас возникли некоторые проблемы с отображением из json в массив. Когда мы пытались ранее, мы получили либо «неопределенный объект», либо пустую таблицу. Помощь приветствуется!

Это выдержка из файла json.

 {
"workOrder1": [
{ "articleNumber": "1", "productName": "Mjölk", "pickUp": "L1H1",  
"dropOff": "M1", "amount": "6", "status": "Klar" },
{ "articleNumber": "2", "productName": "Ägg", "pickUp": "L2H1", "dropOff": "M2", "amount": "3", "status": "Pågående" },
{ "articleNumber": "3", "productName": "Mjöl", "pickUp": "L3H4", "dropOff": "M3", "amount": "1", "status": "Ej påbörjad" }
],
}
  

И это собственный код react для таблицы

 constructor(props){
super(props);
this.state = {
tableHead: [ 'Art', 'Prod', 'Hämtas', 'Lämnas', 'Mängd', 'Status'],
tableData: [
    ['1', '2', '3', '4', '5', '6'],
    ['1', '2', '3', '4', '5', '6']
]
}
}

componentDidMount(){
this.fetchWorkOrder();
}

fetchWorkOrder(){
fetch("www.example.com/request", {
  method: 'GET'
})
.then((response) => response.json())
.then((response) => {
  this.setState({
    tableData: response
  });
});
}

render() {
const state = this.state;
return (
  <View style={styles.container}>
  <Text style={styles.header}>Alla arbetsordrar</Text>
  <Table borderStyle={{ borderWidth: 2, borderColor: 'black'}}>
    <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
    {
      Object.values(state.tableData).map((workOrder1, index) => {
        <Row
          key={index}
          data={workOrder1}
          style={styles.row}
        />
      })
    }
  </Table>
  </View>
)
}
}
  

Вы вводите неправильные значения в таблицу, это должен быть массив значений, вы вводите массив объектов, попробуйте это:

     state.tableData.workOrder1.map((e)=>{
    let workOrder1=Object.values(e)
    return(
            <Rows
              key={index}
              data={workOrder1}
              style={styles.row}
            />
     )
  })