Как мне 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>

Вот код, я полагаю, проблема с загрузкой. 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), но это тоже не работает. Код рендеринга - (надеюсь, эта часть o.k - 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: нераспознанный токен« <»». </p>

Answer 1

выдает ошибку: «Ошибка синтаксического анализа JSON: нераспознанный токен« <»». </p>

Это значит, что вы пытаетесь разобрать не 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","Image":"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","Image":"http://myurl.com/images/Mellon_Collie.jpg"}]

Другая возможность состоит в том, что вы не получаете JSON, который, как вы думаете, вообще есть, а вместо этого это сообщение об ошибке от сервера в виде HTML (учитывая, что < символ). (HTML-код вполне может сообщать об ошибке, см. № 4 ниже.)

Но у вас есть две другие проблемы:

3. Вы пытаетесь выполнить двойной анализ 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);
       });
   }
   

   Разбор только один раз.

4. Ваш код должен проверить response.ok. Вы не одиноки в том, что пропускаете эту проверку, настолько часто, что люди пропускают ее, что я написал ее в своем маленьком анемичном блоге .

Итак (см. *** комментарии):

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.

Но & ndash; и я не рекомендую это & ​​mdash; если это абсолютно необходимо, вы можете предварительно обработать строку, чтобы справиться с двумя указанными мною проблемами:

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>. Я думаю, что если вы удалите, то сначала должно работать.

Как в этом вопросе .