Question

我想在Listview中显示我的JSON。问题是我不知道如何使用代码来显示我的JSON数据 enter image description here

这是我的JSON响应。我想展示nama和harga_jual

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  AsyncStorage,
  Alert,
  ListView,

  View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import { Header, Container, Content, Icon, Left, Body, Right, Button, Title, Card, CardItem, Thumbnail} from 'native-base';


export default class Product extends Component {


  constructor(props) {
    super(props);

        var dataSource = new ListView.DataSource({
          rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.state={
        iduser: '',
        idgrup_outlet: '',
        url:'',
        dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
       

      }
  }  

   async componentWillMount() {

    const value = await AsyncStorage.getItem('iduser').then((value) => {
          this.setState({
            'iduser': value
         
          });
             console.log("ID User is : " + this.state.iduser);
        })

      const value1 = await AsyncStorage.getItem('idgrup_outlet').then((value) => {
        this.setState({
          'idgrup_outlet': value
        });
          console.log("ID Group Outlet is : " +(this.state.idgrup_outlet));
      })

      const value2 = await AsyncStorage.getItem('url').then((value) => {
          this.setState({
            'url': value            
          });
           console.log("URL is : " + this.state.url);
        })

        console.log("ID User is : " + this.state.iduser);

      let response = await fetch('http://'+this.state.url+'/web_services/list_produk/new.json', {
                                method: 'POST',
                                headers: {
                                  'Accept': 'application/json',
                                  'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({
                                  erzap: {  
                                    iduser: this.state.iduser,
                                    idgrup_outlet: this.state.idgrup_outlet,
                                  }
                                })
                              });
      let responseJson = await response.json();
       // console.log(JSON.stringify(responseJson.produks[nama]));
       console.log(JSON.stringify(responseJson.produks));
   }

  render() {
    return (
      <Container>
      <Header style={{backgroundColor: '#03A9F4'}}>
              <Left>
                  <Button transparent>
                      <Icon name='menu'/>
                  </Button>
              </Left>
            </Header>
       <Content>
           <ListView
             dataSource={this.state.dataSource}
             renderRow={(rowData) => <Text>{rowData.nama}</Text>}
            />
       </Content>
     </Container>
    );
  }

}

const styles = StyleSheet.create({

  carditem: {
    paddingLeft: 10,
  },

});

这是我的代码

Answer 1

这里你可以做的是在componentWillMount方法中将dataSource的状态设置为responseJson。所以它看起来像这样：

// ... the rest of the code
let responseJson = await response.json();
this.setState({
  dataSource: this.state.dataSource.cloneWithRows(responseJson),
});

JSON Listvew反应原生

1 个答案: