Api url: https://dev.dashmed.in/sample-data
my code for fetching api and rendering in a table:
import React, { Component } from 'react'
import axios from 'axios'
export default class javascriptMap extends Component {
constructor(props){
super(props)
this.state = {
data: []
}
}
getData(){
axios.get('https://dev.dashmed.in/sample-data').then(res => {
var data = res.data
this.setState({data : data})
})
}
componentDidMount(){
this.getData()
}
render() {
return (
<>
<ul>
{this.state.data.map(d => (<li key={d.medName}>{d.saltName}</li>))}
</ul>
</>
)
}
}
Please point out where the error is being committed.
Because your res.data contains {status: true, data: Array(5000)}. You need to set res.data.data into state.
getData(){
axios.get('https://dev.dashmed.in/sample-data').then(res => {
const data = res.data.data
this.setState({data : data})
})
}
Related
[enter link description here][1]I am fetching API in react. I am able to see data in console but it is not appearing in JSX. I want to see Data id, name and value. But it is not appearing in browser.
[1]: https://codesandbox.io/s/late-thunder-456qp?file=/src/App.js
import React from 'react';
import axios from 'axios'
import './App.css';
class Main extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [],
error: ''
}
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/users')
.then( response => {
console.log(response);
this.setState({users: response.data})
})
.catch(error =>{
console.log(error);
})
}
render() {
const { users } = this.state
return (
<div>
<h2> Main Page</h2>
<p class="para-text"> Data from API</p>
{
users.length ?
users.map(post => <div key ={ users.id }> { users.name} </div>) : null
}
</div>
);
}
}
export default Main;
when mapping you named the key to your map as post and therefore when displaying them in jsx you must refer to that key
attached is a forked version of your sandbox https://codesandbox.io/s/late-thunder-456qp?file=/src/App.js
import "./styles.css";
import React from "react";
import axios from "axios";
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [],
error: ""
};
}
componentDidMount() {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((response) => {
this.setState({ users: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { users } = this.state;
return (
<div>
<h2> Main Page</h2>
<p class="para-text"> Data from API</p>
{users.length > 0
? users.map((post) => <div key={post.id}> {post.name} </div>)
: null}
</div>
);
}
}
export default Main;
I need help to display the data from the API.
When i try to get the data with map i get an error. TypeError: userdata.map is not a function
import React from "react";
import axios from "axios";
export class HighscoreList extends React.Component {
constructor(props) {
super(props);
this.state = {
users: ""
};
}
componentDidMount() {
axios
.get("https://schnitzeljagdar.herokuapp.com/users/getAllUser")
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<React.Fragment>
<h2>User</h2>
{this.state.users}
</React.Fragment>
);
}
}
Try this https://codesandbox.io/s/wonderful-cherry-63ee9
export default class HighscoreList extends React.Component {
state = {
users: []
};
componentDidMount() {
axios
.get("https://schnitzeljagdar.herokuapp.com/users/getAllUser")
.then(res => this.setState({users:[res.data]}))
.catch(error => {
console.log(error);
});
}
render() {
const {users} = this.state;
let array = users[0]?Object.values(users[0]):[];
console.log(array)
return (
<React.Fragment>
{array.map((arr,index)=>
<div key={index}>
<h2>{arr.username}</h2>
<p>{arr.email}</p>
</div>
)}
</React.Fragment>
);
}
}
Iam trying to print back the value fetched from API. The data is coming but not able to set the state
Tried everything
React.js
import React, { Component } from 'react'
import axios from 'axios'
class Admin extends Component {
constructor(props) {
super(props)
this.state = {
users: []
}
}
componentDidMount(){
axios.get('/api/adminUsers')
.then(response =>{
this.setState({users: response.data})
console.log(response.data)
console.log(this.setState({users: response.data}))
})
.catch(error=>{
this.setState({ errorMsg: "Something is wrong here"})
console.log(error)
})
}
render() {
const{users} = this.state
<div>
{
users.length ?
users.map(user => <div key=
{user.id}>{user.name}</div>)
: null
}
</div>
)
}
}
export default Admin
The response.data showing in console is:
{[
created_at: "2019-08-31 14:06:29"
email: "amit.khare588#gmail.com5"
email_verified_at: null
id: 2
name: "Amit Khare"
role: "Doctor"
updated_at: "2019-08-31 14:06:29"
]}
I just want to print the data back
The code seems fine below is a fully working example:
import React from "react";
import ReactDOM from "react-dom";
class Admin extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [],
errorMsg: ''
}
}
componentDidMount() {
axios.get('/api/adminUsers')
.then(response => {
this.setState({users: response.data.users})
console.log(response.data)
})
.catch(error => {
this.setState({errorMsg: "Something is wrong here"})
console.log(error)
})
}
render() {
const {users, errorMsg} = this.state;
return <div>
{users.length ? users.map(user => <div key={user.id}>{user.name}</div>) : null}
{errorMsg ? <div>{errorMsg}</div> : null}
</div>
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Admin/>, rootElement);
Checkout the codesandbox: https://codesandbox.io/s/nice-fermi-ku1jr
I am trying to fetch the message outputted by the following endpoint:
http://helloworld-env-2.5fwknpgms8.us-east-2.elasticbeanstalk.com/
I just ran a create-react-app to create my application and changed the code in the App.js file
New Code:
import React, { Component } from 'react';
import './App.css';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
error: null,
isLoaded: false,
items: ""
};
}
componentDidMount(){
console.log("mounting component");
fetch("http://helloworld-env-2.5fwknpgms8.us-east-2.elasticbeanstalk.com/")
.then((result) => {
this.setState({
isLoaded: true,
items: result
});
});
}
render() {
console.log("rendering");
const isLoaded = this.state.isLoaded;
if(isLoaded){
return (<div> {this.state.items} </div>);
}
else{
return (
<div>loading</div>
);
}
}
}
export default App;
I keep getting the loading message.
You need to parse the response from fetch:
componentDidMount(){
fetch("http://helloworld-env-2.5fwknpgms8.us-east-2.elasticbeanstalk.com/")
.then((result) => result.json()) // here
.then((result) => {
const { a } = result; // access 'a' key from response
this.setState({
isLoaded: true,
items: a
});
});
}
Here are the docs.
I have a react, which uses django rest framework API. I'm to get JSON data but it seems I'm not fetching the information correctly or I'm not rendering in the right way:
import React, { Component } from 'react' ;
class App extends Component {
state = {
todos: []
};
async componentDidMount() {
fetch('http://127.0.0.1:8000/api/todos/')
.then(results =>{
console.log(results)
const get_todos = results.map( c=>{
return {
id: c.id,
title: c.title,
descripttion: c.title
};
});
const newstate = Object.assign({},this.state,{
todos: get_todos
});
this.setState(newstate);
}).catch(error=> console.log(error));
}
render(){
return (
<div className="App">
{this.state.todos}
</div>
)
}
}
export default App;
it should be
state = { loading : true }
componentDidMount() {
fetch('http://127.0.0.1:8000/api/todos/')
.then(blob => blob.json())
.then(response => {
...
})
}