CODEWITHSUNDEEP
jsonreactjsreact-native
OhWords
OhWords

Reputation: 87

REACT - fetch json data from url and display it

I am new to REACT and I was trying to learn how to get and display a specific parameter from a json style message stored in an url.

For instance, the video I was trying to show, is stored in and url, which is a field of the json message itself, so it would look like this:

{

    "type": "video", 

    "url": "http://somewebsite.com/wantedvideo.mp4" 
}

From what i've read, fetch() is one way to get the data, but unfortunately I couldn't seem to understand what can be missing in the code I tried:

Here's my newbie attempt:

import React, {Component} from 'react';

class App extends Component{
  constructor()
  {
    super();
    this.state={
      data: [],
    }
  }

  componentDidMount()
  {
    fetch('https://demo7443497.mockable.io/stream/video')
    .then((response) => response.json())
    .then((findresponse)=>{
      console.log(findresponse.url)
      this.setState({
        data:findresponse.url,
      })
    })
  }

  render()
  {
    return(
        <div>
          {this.state.data.url} 
        </div> 
    )
  }

}

export default App;

My render() always looked suspiciously too simple for me, so my apologies for any "mad" mistakes I may have made

PS: If instead of a video there was some other data format such as an image or plain text in the url of the url field, is there an disavantadge in using the same code to fech it?

Thank you

Upvotes: 2

Views: 18762

Answers (2)

Amitesh Singh
Amitesh Singh

Reputation: 183

I'm going to provide a simple App component which look like this -

import React, {Component} from 'react';
import { Player } from 'video-react';

class App extends Component{
    constructor() {
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        fetch('https://demo7443497.mockable.io/stream/video')
            .then( resp => resp.json())
            .then((data)=> {
                this.setState({
                    data: data.url
                })
            })
    }

    render() {
        return(
            <Player
                playsInline
                src={ this.state.data }
            />
        )
    }
}

export default App;

Import css -

import "node_modules/video-react/dist/video-react.css"; // import css

@import "~video-react/styles/scss/video-react"; // or import scss

Add <link rel="stylesheet" href="/css/video-react.css" /> inside index.html

Try this it will work for all browsers.

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

this.setState({
  data: findresponse.url,
})

You are setting url value to data and

in render accessing the data.url. (url on data which does not exists).

If you just put {this.state.data},you will get url value.

Also, if you are getting Object from response then declare state as 

this.state = {
  data: {}, //instead []
}

EDIT :

e.g. to display video using video control as per comment.

<video width="400" controls>
    <source src={this.state.data} type="video/mp4" /> 
    Your browser does not support HTML5 video.
</video>

Working codesandbox

Upvotes: 2

Related Questions