How do I JSON.parse a string from URL (React Native)

Question

I have a URL with a string which I want to JSON.parse it (I'm new at React native).

here is part of the URL with the string -

<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>

Here is the code, I believe the fetch has the problem. The dataSource: JSON.parse(responseJson) doesn't do the job.

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);
      });
  }

I tried dataSource: JSON.stringify(responseJson) but it doesn't do the job also. The render code - (I hope this part is 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>
    );
  }
}

it shows me the error: " JSON Parse error: Unrecognized token '<' ".

Answer 1

it shows me the error: " JSON Parse error: Unrecognized token '<' ".

That means what you're trying to parse isn't JSON. So you'll want to use the browser's Network tab to see what it is.

If it's really what you have in your question:

[{"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"},]

Then there are two problems with it:

1. The <string> at the start and the </string> at the end (and that fits your error message), and

2. In JSON, you can't have a trailing comma in an array.

Here's the correct JSON version of that:

[{"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"}]

Another possibility is that you're not getting the JSON you think you are at all, and instead it's an error message from the server as HTML (given that < character). (The HTML may well be reporting an error, see #4 below.)

But you have two other problems:

3. You're trying to double-parse the 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);
       });
   }
   

   Only parse it once.

4. Your code needs to check response.ok. You're not alone in missing out this check, it's so common that people miss it out that I wrote it up on my anemic little blog.

So (see *** comments):

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);
    });
}

---

In a comment you've said:

I can't remove the tag , it comes from c# url WebService.asmx

You should be able to fix that in WebService.asmx. ASP.net absolutely can produce valid JSON. Otherwise, you can't directly parse it as JSON.

But — and I don't recommend this — if absolutely necessary, you can pre-process the string to deal with the two issues I pointed out with it:

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

Seems that the problem is that the reponse contains the tag <string></string>. I think that if u remove then first should work.

Like in this question.