我如何 JSON.parse 来自 URL 的字符串（React Native）

Question

我有一个带有字符串的 URL，我想对其进行 JSON.parse （我是 React Native 的新手）。

这里是带有字符串的 URL 的一部分 -

<string>[{"Song_ID":"11","Song_Name":"The Doors - People","Song_File":"http://myurl.com/songs/The_Doors_People.mp3","Image":"http://myurl.com/images/The_Doors.jpg"},{"Song_ID":"12","Song_Name":"Smashing Pumpkins - Porcelina","Song_File":"http://myurl.com/songs/Smashing_Pumpkins_Porcelina.mp3","Image":"http://myurl.com/images/Mellon_Collie.jpg"},]</string>

这是代码，我相信 fetch 有问题。 dataSource: JSON.parse(responseJson) 不能胜任。

const URL =
  "http://mobile.domain.com/site/WebService.asmx/SongsList";


export default class FetchExample extends React.Component {
  static navigationOptions = {
    title: "Json Data"
  };
  constructor(props) {
    super(props);
    this.state = { isLoading: true };
  }

  componentDidMount() {
    return fetch(URL)
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: JSON.parse(responseJson) // doesn't work
          },
          function() {}
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

我尝试了dataSource: JSON.stringify(responseJson)，但它也没有完成这项工作。 渲染代码 - （我希望这部分没问题 - data={this.state.dataSource}）

   render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.Song_ID}, {item.Song_Name}</Text>}
          keyExtractor={({id}, index) => id} // this part with the "id" and "index" I dont understand (the index in my code is fade)
        />
      </View>
    );
  }
}

它向我显示错误：“JSON Parse error: Unrecognized token '

Answer 1

它向我显示错误：“JSON Parse error: Unrecognized token '

这意味着您要解析的不是 JSON。因此，您需要使用浏览器的“网络”选项卡来查看它是什么。

如果这真的是您的问题：

[{"Song_ID":"11","Song_Name":"The Doors - People","Song_File":"http://myurl.com/songs/The_Doors_People.mp3","Image":"http:// myurl.com/images/The_Doors.jpg"},{"Song_ID":"12","Song_Name":"Smashing Pumpkins - Porcelina","Song_File":"http://myurl.com/songs/Smashing_Pumpkins_Porcelina.mp3 ","图片":"http://myurl.com/images/Mellon_Collie.jpg"},]

那么有两个问题：

1. 开头的 <string> 和结尾的 </string>（这符合您的错误消息），并且

2. 在 JSON 中，数组中不能有尾随逗号。

这是正确的 JSON 版本：

[{"Song_ID":"11","Song_Name":"The Doors - People","Song_File":"http://myurl.com/songs/The_Doors_People.mp3","Image":"http:// myurl.com/images/The_Doors.jpg"},{"Song_ID":"12","Song_Name":"Smashing Pumpkins - Porcelina","Song_File":"http://myurl.com/songs/Smashing_Pumpkins_Porcelina.mp3 ","图片":"http://myurl.com/images/Mellon_Collie.jpg"}]

另一种可能性是您根本没有得到您认为的 JSON，而是来自服务器的 HTML 错误消息（给定 < 字符）。 （HTML 很可能会报告错误，请参见下面的 #4。）

但是你还有另外两个问题：

1. 您正在尝试双重解析 JSON：

   componentDidMount() {
     return fetch(URL)
       .then(response => response.json()) // <=== Parses the JSON
       .then(responseJson => {
         this.setState(
           {
             isLoading: false,
             dataSource: JSON.parse(responseJson) // <=== Tries to parse it again
           },
           function() {}
         );
       })
       .catch(error => {
         console.error(error);
       });
   }
   

   只解析一次。

2. 您的代码需要检查response.ok。你不是唯一一个错过这张支票的人，这很常见以至于人们错过了我wrote it up on my anemic little blog。

所以（见*** cmets）：

componentDidMount() {
  return fetch(URL)
    .then(response => {
        if (!response.ok) {                      // *** Check errors
            throw new Error(                     // ***
                "HTTP status " + response.status // ***
            );                                   // ***
        }                                        // ***
        return response.json();                  // *** Parse the JSON (once)
    })
    .then(dataSource => {                        // *** More accurate name
      this.setState(
        {
          isLoading: false,
          dataSource                             // *** Use the parsed data
        },
        function() {}
      );
    })
    .catch(error => {
      console.error(error);
    });
}

---

在你说过的评论中：

我无法删除标签，它来自 c# url WebService.asmx

您应该能够在 WebService.asmx 中修复它。 ASP.net 绝对可以 生成有效的 JSON。否则无法直接解析为 JSON。

但是——我不推荐这个——如果绝对必要，你可以预处理字符串来处理我指出的两个问题：

componentDidMount() {
  return fetch(URL)
    .then(response => {
        if (!response.ok) {                      // *** Check errors
            throw new Error(                     // ***
                "HTTP status " + response.status // ***
            );                                   // ***
        }                                        // ***
        return response.text();                  // *** Read the TEXT of the response
    })
    .then(dataSourceText => {                    // *** More accurate name
      // *** Remove the invalid parts and parse it
      const dataSource = JSON.parse(
        dataSourceText.match(/^<string>(.*),]<\/string>$/)[1] + "]"
      );
      this.setState(
        {
          isLoading: false,
          dataSource                             // *** Use the parsed data
        },
        function() {}
      );
    })
    .catch(error => {
      console.error(error);
    });
}

Answer 2

似乎问题在于响应包含标签<string></string>。我认为如果你删除然后首先应该工作。

喜欢这个question。