Рендеринг внутри массива JSON - PullRequest
Новая
       2

Рендеринг внутри массива JSON

0 голосов
/ 13 февраля 2020

У меня есть страница заказа, где я отображаю заказы, сделанные человеком, данные, которые у меня есть в глобальном JSON, я могу получить доступ к this.state.data, однако я также хочу получить доступ к массиву продукты внутри этого JSON и отображать его предметы, есть идеи, как я могу oop это соответственно? Пожалуйста, помогите.

Мои журналы: 

[{
  "__v": 1,
  "_id": "5e44e68d7ce9f60c5cfd0c6b",
  "addressLineOne": "G",
  "city": "J",
  "customerName": "Tr",
  "mobile": 8697779335,
  "order_id": "order_EG7aMZwcx9uQf3",
  "order_verification_status": false,
  "payment_method": "COD",
  "payment_status": false,
  "phoneNumber": 8697779335,
  "pincode": 713211,
  "products": [
    [Object]
  ],
  "state": "B",
  "street": "V"
}, {
  "__v": 1,
  "_id": "5e44e6b87ce9f60c5cfd0c79",
  "addressLineOne": "Fd",
  "city": "J",
  "customerName": "Tr",
  "landmark": "M",
  "mobile": 8697779335,
  "order_id": "order_EG7b82pB6uKRXo",
  "order_verification_status": false,
  "payment_method": "COD",
  "payment_status": false,
  "phoneNumber": 8697779335,
  "pincode": 713211,
  "products": [
    [Object]
  ],
  "state": "V",
  "street": "D"
}]

Весь мой код выглядит следующим образом: 

import * as React from 'react';
import {
  Text,
  View,
  StatusBar,
  StyleSheet,
  FlatList,
  ActivityIndicator,
  Platform,
  Image,
} from 'react-native';
import { SearchBar, Card, Button } from 'react-native-elements';
import { Appbar } from 'react-native-paper';

export default class Order extends React.Component {
  constructor(props) {
    super(props);
    //setting default state
    this.state = { 
      isLoading: true, 
      search: '' , 
      data: [], 
      orderplaced: [],

    };

  }
  componentDidMount() {
    return fetch('some url')
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            data: responseJson.orderplaced
          },
          console.log('a',responseJson.orderplaced[0].products),

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

  render() {
    if (this.state.isLoading) {
      //Loading View while data is loading
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (

      <View style={{ backgroundColor: '#f0f8ff', height: '100%' }}>
        <Appbar.Header style={{ backgroundColor: 'white' }}>
        <Appbar.BackAction onPress={() =>this.props.navigation.navigate('User')} />
          <Appbar.Content title="Orders" />
        </Appbar.Header>
        <View>
          <SearchBar
            round
            lightTheme
            searchIcon={{ size: 24 }}
            onChangeText={text => this.SearchFilterFunction(text)}
            onClear={text => this.SearchFilterFunction('')}
            placeholder="Type Here..."
            placeholderTextColor="black"
            value={this.state.search}
            containerStyle={{
              backgroundColor: '#f0f8ff',
              borderBottomColor: '#f0f8ff',
              borderTopColor: '#f0f8ff',
              padding: 10,
            }}
          />

 <FlatList
          showsVerticalScrollIndicator={false}
          index = {0}
          data={this.state.data}
          // ItemSeparatorComponent={this.ListViewItemSeparator}
          //Item Separator View
          renderItem={({ item }) => (
            // Single Comes here which will be repeatative for the FlatListItems


              <Card
              containerStyle={{ padding: 10, marginLeft: 3, marginRight: 3 }}>
              <View>
        <View style={{ flexDirection: 'row' }}>
          <Image
            style={{ height: 100, width: 100, marginLeft: 0 }}
            source={{
              uri:
                item.urlImg}}
          />

          <View sttle = {{ flexDirection: 'column'}}>
<Text style={{ paddingLeft: 20 }}>Order Id - {item._id}</Text>
          <Text style={{ paddingLeft: 20 }}>{item.title}</Text>
            <Text>{this.renderProducts}</Text>
          <Text style={{ paddingLeft: 20 }}>INR{item.totalPrice} . {item.customerName} </Text>
          <Text style={{ paddingLeft: 20 }}>Time </Text>
          </View>
        </View>
      </View>
            </Card>



          )}
          enableEmptySections={true}
          style={{ marginTop: 10 }}
          keyExtractor={(item) => item.order_id}
        />
        </View>

      </View>
    );
  }
}

Так что в основном я должен отображать данные о продуктах из файл JSON, размещенный по порядку, с отображением customerName или orderid et c из глобального JSON. Я должен получить доступ к массиву "products" внутри. Пожалуйста, помогите и скажите мне, если что-нибудь еще требуется.

Мой ответ JSON logs: 

hello {"orderplaced": [{"__v": 1, "_id": "5e44e68d7ce9f60c5cfd0c6b", "addressLineOne": "G", "city": "J", "customerName": "Tr", "mobile": 8697779335, "order_id": "order_EG7aMZwcx9uQf3", "order_verification_status": false, "payment_method": "COD", "payment_status": false, "phoneNumber": 8697779335, "pincode": 713211, "products": [Array], "state": "B", "street": "V"}, {"__v": 1, "_id": "5e44e6b87ce9f60c5cfd0c79", "addressLineOne": "Fd", "city": "J", "customerName": "Tr", "landmark": "M", "mobile": 8697779335, "order_id": "order_EG7b82pB6uKRXo", "order_verification_status": false, "payment_method": "COD", "payment_status": false, "phoneNumber": 8697779335, "pincode": 713211, "products": [Array], "state": "V", "street": "D"}]}

Ответы [ 3 ]

0 голосов
/ 13 февраля 2020

Вы можете использовать Javascript функцию карты

Пример ниже: 

{ this.state.data.map(message => (
        <div className="newmessage">
            <p>User: {message.user}</p>
            <p>Message: {message.message}</p>
        </div>
    ))}
0 голосов
/ 13 февраля 2020

Я предлагаю вам go по этой ссылке и проверить компонент flatlist. Он точно соответствует вашим требованиям и другим полезным функциям.

0 голосов
/ 13 февраля 2020

То, что вы можете сделать, это просто l oop поверх продуктов: 

renderProducts = () => {

return this.state.data.products.map((data,index) => {
return(

<View>
<Text>{data.customerName}</Text>
</View>
)

});

}

, и в вашем основном рендере вы можете иметь: 

render(){

return(

<View>
{this.renderProducts()}
</View>
)
}

ОБНОВЛЕНИЕ:

Ваш новый код должен выглядеть следующим образом: 

class ABC extends Component {

renderProducts = () => {

    return this.state.data.products.map((data,index) => {
    return(

    <View>
    <Text>{data.customerName}</Text>
    </View>
    )

    });

    }


 render(){

    return(

    <View>
    {this.renderProducts()}
    </View>
    )
    }




}

Помогает ли это сейчас?

Надеюсь, это поможет. не стесняйтесь сомнений

...