json - 如何在React Native中解析json数据

Question

嗨，我是 React Native 开发的新手，如何解析以下数据请帮助我

这是我的代码

componentDidMount() {
fetch('https://api.myjson.com/bins/96ebw')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.Pharmacy,
}, 

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

renderItem(dataSource) {
const { List: list } = this.state.dataSource
const { item } = dataSource;

return (
<View style={styles.itemBlock}>
<View style={styles.itemMeta}>
<Text style={styles.itemName}>{item.RxDrugName}</Text>
<Text style={styles.itemLastMessage}>{item.RxNumber}</Text>
</View>

<View style={styles.footerStyle}>
<View style={{ paddingVertical: 10 }}>
<Text style={styles.status}>{ item.StoreNumber }</Text>
</View>

<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image source={require('../assets/right_arrow_blue.png')} />
</View>

</View>
</View>
);
}

json 是

[
  {
    "Pharmacy": {
      "Name": "Hillcrest MOB Pharmacy",
      "StoreNumber": "254",
      "Address": {
        "StreetAddress": "50 Hillcrest Medical Blvd Ste 200-1",
        "City": "WACO",
        "State": "TX",
        "Zip": "76712"
      },
      "IsDefault": false
    },
    "ReadyForPickups": [
      {
        "RxDrugName": "Tizanidine HCL 4mg Caps",
        "RxNumber": "6000295",
        "StoreNumber": "254",
        "PatientPay": "15.59"
      }
    ]
  },

  {
    "Pharmacy": {
      "Name": "Waco Pharmacy",
      "StoreNumber": "251",
      "Address": {
        "StreetAddress": "1412 N Valley Mills, Suite 116",
        "City": "WACO",
        "State": "TX",
        "Zip": "76710"
      },
      "IsDefault": false
    },
    "ReadyForPickups": [
      {
        "RxDrugName": "Fluoxetine HCL 40mg Caps",
        "RxNumber": "6000233",
        "StoreNumber": "251",
        "PatientPay": "17.3"
      }
    ]
  }

]

Answer 1

问题是 json 响应是一个对象数组。您需要从数组中选择对象。

例如，如果您想要数组中的第一项，您可以执行以下操作

const 首先 = jsonResponse[0]

{
  "Pharmacy":{
    "Name":"Hillcrest MOB Pharmacy",
    "StoreNumber":"254",
    "Address":{
      "StreetAddress":"50 Hillcrest Medical Blvd Ste 200-1",
      "City":"WACO",
      "State":"TX",
      "Zip":"76712"
    },
    "IsDefault":false
  },
  "ReadyForPickups":[
    {
      "RxDrugName":"Tizanidine HCL 4mg Caps",
      "RxNumber":"6000295",
      "StoreNumber":"254",
      "PatientPay":"15.59"
    }
  ]
}

现在您可以尝试使用 first.Pharmacy 从那里捕获数据。

因此 console.log(first.Pharmacy.Name) 应该为您提供 Hillcrest MOB Pharmacy

您似乎正在尝试创建并显示这些药房的列表。根据您拥有的元素数量，有几种方法可以做到这一点。然而，最高效且最简单的方法是使用 FlatList。如果由于任何原因 View 延伸到页面之外，这将处理 View 。

那么让我们设置 FlatList。

首先，从react-native导入FlatList。

其次，将 componentDidMount 中的 setState 调用更改为

this.setState({
  isLoading: false,
  dataSource: responseJson
}

添加以下方法

renderItem = ({item, index}) => {
  let { Pharmacy, ReadyForPickups } = item;

  if(!ReadyForPickups[0]) return null;
  let details = ReadyForPickups[0]

  return (
  <View style={styles.itemBlock}>
    <View style={styles.itemMeta}>
      <Text style={styles.itemName}>{details.RxDrugName}</Text>
      <Text style={styles.itemLastMessage}>{details.RxNumber}</Text>
    </View>

    <View style={styles.footerStyle}>
      <View style={{ paddingVertical: 10 }}>
        <Text style={styles.status}>{ details.StoreNumber }</Text>
      </View>

      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Image source={require('../assets/right_arrow_blue.png')} />
      </View>

    </View>
  </View>
  );
}

keyExtractor = (item, index) => {
  return index.toString();
}

那么你的渲染方法应该看起来像这样

  render () {
      return (
        <View style={{flex: 1}}>
          <FlatList
            data={this.state.dataSource}
            keyExtractor={this.keyExtractor}
            renderItem={this.renderItem}
          />
        </View>
      );
    }

那么它应该看起来像这样。显然样式丢失了，我使用了替代图像。但这应该是您正在寻找的想法。

希望这足以获取您需要的数据。

更新

这是一个完全工作的组件，它呈现与上面类似的列表

import React, { Component } from 'react';
import { View, Text, FlatList, Image } from 'react-native';
import PropTypes from 'prop-types';

// import screens styles
import styles from './styles';

class Pharmacy extends Component {
  /**
   * Construct component class
   * @param {object} props
   */
  constructor (props: {}) {
    super(props);

    this.state = {
        isLoading: true,
        dataSource: []
    };
  }

  componentDidMount () {
    fetch('https://api.myjson.com/bins/96ebw')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson
        });
      });
  }

  renderItem = ({item, index}) => {
    let { Pharmacy, ReadyForPickups } = item;

    if (!ReadyForPickups[0]) return null;
    let details = ReadyForPickups[0];

    return (
      <View style={styles.itemBlock}>
        <View style={styles.itemMeta}>
          <Text style={styles.itemName}>{details.RxDrugName}</Text>
          <Text style={styles.itemLastMessage}>{details.RxNumber}</Text>
        </View>

        <View style={styles.footerStyle}>
          <View style={{ paddingVertical: 10 }}>
            <Text style={styles.status}>{ details.StoreNumber }</Text>
          </View>

          <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Image source={{uri: 'https://images.pexels.com/photos/949586/pexels-photo-949586.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'}}
              style={{height: 50, width: 50}}/>
          </View>

        </View>
      </View>
    );
  }

  keyExtractor = (item, index) => {
    return index.toString();
  }

  render () {
    return (
      <View style={{flex: 1}}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

export default Pharmacy;

更新2

与原始问题发布者交谈后，他们似乎只想将 ReadyForPickups 项目显示为单个列表。

这可以通过对 responseJson 执行映射和归约来完成，以便将 setState 调用更新为以下内容

this.setState({
  isloading: false,
  dataSource: responseJson.map(item => item.ReadyForPickups).reduce((acc, currValue) => { return acc.concat(currValue); }, [])
});

这会将 ReadyForPickup 项目分组到一个长列表中，如下所示:

[
  {
    "RxDrugName":"Tizanidine HCL 4mg Caps",
    "RxNumber":"6000295",
    "StoreNumber":"254",
    "PatientPay":"15.59"
  },
  {
    "RxDrugName":"Hydroxychloroquine Sulfate 200 Tabs",
    "RxNumber":"6000339",
    "StoreNumber":"201",
    "PatientPay":"16.18"
  },
  {
    "RxDrugName":"Naratriptan HCL 2.5mg Tabs",
    "RxNumber":"6000300",
    "StoreNumber":"111",
    "PatientPay":"39.04"
  },
  {
    "RxDrugName":"Tizanidine HCL 4mg Caps",
    "RxNumber":"6000457",
    "StoreNumber":"08",
    "PatientPay":"15.59"
  },
  {
    "RxDrugName":"Lisinopril 20mg Tabs",
    "RxNumber":"6000318",
    "StoreNumber":"08",
    "PatientPay":"13.46"
  },
  {
    "RxDrugName":"Fluoxetine HCL 40mg Caps",
    "RxNumber":"6000233",
    "StoreNumber":"251",
    "PatientPay":"17.3"
  },
  {
    "RxDrugName":"Tizanidine HCL 4mg Caps",
    "RxNumber":"6000222",
    "StoreNumber":"232",
    "PatientPay":"15.59"
  },
  {
    "RxDrugName":"Memantine HCL 5mg Tabs",
    "RxNumber":"6000212",
    "StoreNumber":"231",
    "PatientPay":"17.99"
  },
  {
    "RxDrugName":"Clonidine HCL 0.1mg Tabs",
    "RxNumber":"6000339",
    "StoreNumber":"07",
    "PatientPay":"12.71"
  },
  {
    "RxDrugName":"Benazepril HCL 5mg Tabs",
    "RxNumber":"6000261",
    "StoreNumber":"06",
    "PatientPay":"13.45"
  },
  {
    "RxDrugName":"Clonidine HCL 0.1mg Tabs",
    "RxNumber":"6000524",
    "StoreNumber":"02",
    "PatientPay":"12.73"
  },
  {
    "RxDrugName":"Timolol Maleate 20mg Tabs",
    "RxNumber":"6000771",
    "StoreNumber":"02",
    "PatientPay":"15.33"
  },
  {
    "RxDrugName":"Benazepril HCL 5mg Tabs",
    "RxNumber":"6002370",
    "StoreNumber":"01",
    "PatientPay":"13.45"
  },
  {
    "RxDrugName":"Eliquis 5mg Tabs",
    "RxNumber":"6002609",
    "StoreNumber":"01",
    "PatientPay":"20.88"
  },
  {
    "RxDrugName":"Atorvastatin Calcium 20mg Tabs",
    "RxNumber":"6002602",
    "StoreNumber":"01",
    "PatientPay":"17.69"
  },
  {
    "RxDrugName    ":"Astagraf Xl 0.5mg Cp24",
    "RxNumber":"6000232",
    "StoreNumber":"278",
    "PatientPay":"15.33"
  },
  {
    "RxDrugName":"Ropinirole HCL 0.5mg Tabs",
    "RxNumber":"6000067",
    "StoreNumber":"112",
    "PatientPay":"14.75"
  },
  {
    "RxDrugName":"Ciprofloxacin HCL 0.3% Soln",
    "RxNumber":"6000217",
    "StoreNumber":"275",
    "PatientPay":"55.06"
  },
  {
    "RxDrugName":"Sotalol HCL 240mg Tabs",
    "RxNumber":"6000575",
    "StoreNumber":"09",
    "PatientPay":"17.5"
  }
]

为了匹配新的数据源，应更新 renderItem 函数，以便它显示列表。

renderItem = ({item, index}) => {

  return (
  <View style={styles.itemBlock}>
    <View style={styles.itemMeta}>
      <Text style={styles.itemName}>{item.RxDrugName}</Text>
      <Text style={styles.itemLastMessage}>{item.RxNumber}</Text>
    </View>

    <View style={styles.footerStyle}>
      <View style={{ paddingVertical: 10 }}>
        <Text style={styles.status}>{item.StoreNumber }</Text>
      </View>

      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Image source={require('../assets/right_arrow_blue.png')} />
      </View>

    </View>
  </View>
  );
}