Fetch API Console data on webpage using axios

Question

I created a simple date picker react js, after that I call API and get some data from API in the console, now I want to fetch API data on the web page.

Here is the code i used to call API function, I want map response data on a web page

import React, { Component } from 'react'
import axios from 'axios'

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',

            
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
        .then(response => {
            console.log(response.data)
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
        
            </div></center>
        )
    }
}
export default PostForm

Hi, in order for the community to understand more about you problem and help you, please also provide the code that you have created. — hisam, Sep 21 '21 at 05:37

score 0 · Answer 1 · answered Oct 07 '21 at 07:48

0

First you have to save the data somewhere inside the app. Create a state and use setState to update it. Now that you have the latest data, you can use JSX's magic to display them using map. Example:

<div>
  {this.state.data.map((dataObjectToDisplay) => {
    return (
      <div>
        {/* Include your data in a way you want here, you can also replace the div with any other element (li) */}
      </div>
    );
  })}
</div>

answered Oct 07 '21 at 07:48

MrCeRaYA

581
4
6

1

@HariprasathLakshmanan add a state (add an object property to this.state) and inside the submitHandler, after getting the response in axios, use `setState({[name of state]: response.data })`. That takes care of the updating the state. As for where to display them, its up to you. You can copy the code any where inside the render method. If u want to display it under the form, paste it inside `div` container after the `form`. For better controlling of the state, you can check one of the state-management tool like redux or simply use global context and implement routing using `react-router` – MrCeRaYA Oct 07 '21 at 14:11
1

@HariprasathLakshmanan sample of code: https://jsfiddle.net/78oaybhv/1/ – MrCeRaYA Oct 07 '21 at 14:11
@HariprasathLakshmanan the `map` function we are using already depends on the fact that the response data is an array. The function loops through the array so you can use manipulate the array and return a new one (that will be an array of elements). In your case, it will be an array of videos. if we name array elements `videoURL` then the map function will be as follows: `{this.state.data.map((videoURL) => )}` – MrCeRaYA Oct 08 '21 at 09:22
@HariprasathLakshmanan can u explain the issue more? do u mean u want to remove the `http://localhost:3000` part? – MrCeRaYA Oct 08 '21 at 12:15
it should work if you remove it, but ONLY on your machine (depending on your platform of course). This is because you need to know which IP to get the information from. Your way of hosting the backend directly is wrong. you should do a stream api for the files and do your checking and do dynamic urls. @HariprasathLakshmanan – MrCeRaYA Oct 08 '21 at 12:21
1

if an array elements are duplicated, you should check the backend. If you mean you want to render the data that has `n * n` number of elements, just use the same method, add a new state, update it and map through the array. – MrCeRaYA Oct 08 '21 at 12:29
`{this.state.data.map((videoURL) => )}` in this state after convertion how to fetch this on webpage – Oct 12 '21 at 07:24
using this create elements ( A video elm for each url ) for you which are displayed on your page. @HariprasathLakshmanan – MrCeRaYA Oct 13 '21 at 05:20

score 0 · Answer 2 · answered Oct 07 '21 at 08:14

0

<div>
  {this.state.data.map((dataObjectToDisplay) => {
    return (
      <div>
        {/* Include your data in a way you want here, you can also replace the div with any other element (li) */}
      </div>
    );
  })}
</div>

answered Oct 07 '21 at 08:14

Arnav Singh

194
2
4

did you literally just copy the answer @MrCeRaYA gave 25 minutes before you? that's bold. – Micha Brugger Oct 07 '21 at 08:18

score 0 · Accepted Answer · 2021-10-08T07:40:42.800

Here is the explanation for this issue you can refer here,

import React, { Component } from 'react'
import axios from 'axios'

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '',
            // Where data will be saved.
            data: [],
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
        .then(response => {
                        // Updating the state to trigger a re-render       
            this.setState({data: response.data});
            console.log(response.data)
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
            <div>
{this.state.data.map((dataObjectToDisplay) => {
    return (
    <div>
        {
            <ol>{this.state.data}</ol>
        }
    </div>
    );
})}
</div>
    
            </div></center>
        )
    }
}
export default PostForm

add a state (add an object property to this.state) and inside the submit handler, after getting the response in Axios, use setState({[name of state]: response.data }).

That takes care of updating the state. As for where to display them, it is up to you.

You can copy the code anywhere inside the render method. If u want to display it under the form, paste it inside the div container after the form.

For better controlling of the state, you can check one of the state-management tools like redux or simply use global context and implement routing using react-router –

Credits to @MrCeRaYA

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 07 '21 at 08:32

Fetch API Console data on webpage using axios

3 Answers3