is there a way to get a value from json as a variable in react native

Question

I am trying to create an app in react native. I have information stored in a database. I use php to get the information for the database using a query.

I then use fetch to get the information and I am able to get the information and display it as text. I would like to have the data as a variable so that I can use it with react-native sound.

Here is my react native code

  constructor(props){
      super(props);
      this.state = {
          playState:'paused', //playing, paused
          playSeconds:0,
          duration:0,
          FileUrlHolder: ''
      }
      this.sliderEditing = false;
  }

  componentDidMount(){
      fetch('http://f10f7e2e.ngrok.io/Filter.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
       
            // Getting the id.
            id: this.props.navigation.state.params.FlatListClickItemHolder
      })
    }).then((response) => response.json())
    .then((responseJson) => {
        this.setState({
           FileUrlHolder: responseJson[0].FileUrl
           
    });
      
    }).catch((error) => {
      console.error(error);
    });
}

  componentWillUnmount(){
 
  play = async () => {
      if(this.sound){
          this.sound.play(this.playComplete);
          this.setState({playState:'playing'});
      }else{
          
        const filepath = this.state.FileUrlHolder;
        console.log('[Play]', filepath);
        //Alert.alert('id ' + filepath);

          this.sound = new Sound(filepath, (error) => {
              if (error) {
                  console.log('failed to load the sound', error);
                  Alert.alert('Notice', 'audio file error. (Error code : 1)');
                  this.setState({playState:'paused'});
              }else{
                  this.setState({playState:'playing', duration:this.sound.getDuration()});
                  this.sound.play(this.playComplete);
              }
          });    
      }
  }

My json looks like

[{"FileUrl":"John_30th_sept_2018.mp3"}]

You can turn json string to an object using `JSON.parse("YOUR JSON STRING")` — Kubwimana Adrien, Dec 19 '19 at 16:50
Something like: `.then((responseJson) => { let jsonObj = JSON.parse(responseJson); this.setState({ FileUrlHolder: jsonObj[0].FileUrl }); })` — Kubwimana Adrien, Dec 19 '19 at 17:06
this causes an error, SyntaxError: JSON Parse error: Unexpected identifier "object" — CodeLover, Dec 19 '19 at 17:19
Looks like `responseJson` is an object. Do `console.log(typeof responseJson[0])` if it's a `string` the JSON.parse that. I'm not sure if I have understood your question well. — Kubwimana Adrien, Dec 19 '19 at 19:22
You might be calling `this.play()` before `fetch` is resolved. — Kubwimana Adrien, Dec 27 '19 at 21:30

score 1 · Answer 1 · answered Dec 21 '19 at 15:59

1

When you do response.json(), you get back an object that was created using the body of the response. In your case this object will be an array containing an object with a FileUrl property. You don't need to JSON.parse() it because it has already been parsed into an object, this is why you get an error. Your code should work, what exactly is the problem? Are you certain your backend is returning the correct data?

answered Dec 21 '19 at 15:59

emeraldsanto

4,330
1
12
25

yes I have checked my backend and am getting back the right information, I seem to only be able to use the information I get back as texted and not a variable – CodeLover Dec 23 '19 at 14:27
i think this might be the line that is causing the problem const filepath = this.state.FileUrlHolder; as when I try to console.log the filepath nothing is printed to the console – CodeLover Dec 23 '19 at 17:59

is there a way to get a value from json as a variable in react native

1 Answers1