CODEWITHSUNDEEP
javascriptjsonreactjsreduxaxios
EnzyWeiss
EnzyWeiss

Reputation: 198

How to get data from JSON with Axios?

I am trying to fetch server side data in JSON format in a table with Axios, but can't understand how to get every field like id, companyInfo etc.

json :

[
  {
    "id": 1,
    "companyInfo": 1,
    "receiptNum": 1,
    "receiptSeries": "АА",
    "customerName": "Mark",
    "customerSurname": "Smith",
    "customerMiddleName": "Jk",
    "customerPhone": "0845121",
    "services": [
      2,
      16
    ]
  }
]

axios :

 store.dispatch((dispatch) => {
dispatch({type: Actions.FETCH_DATA_START})
axios.get("http://localhost:3004/paymentReceipts")
  .then((response) => {
    dispatch({ type: Actions.RECEIVE_DATA, payload: response })
  }).catch((err) => {
    dispatch({type: Actions.FETCH_DATA_ERROR, payload: err})
  })

reducer :

export const initialState = {
  paymentReceipts: []
};

export default handleActions<FetchData>({
  [Actions.FETCH_DATA_START]: (state, action) => {
    return ;
  },
  [Actions.FETCH_DATA_ERROR]: (state, action) => {
    return;
  },
  [Actions.RECEIVE_DATA]: (state, action) => {
      console.log("DONE WITH STATE");
    return {...state, 
        paymentReceipts :  action.payload
    }
  }
}, initialState)

App

@connect(mapStateToProps, mapDispatchToProps)
export class App extends React.Component<App.Props, App.State> {

  constructor() {
    super();
  }

  render() {
    console.log("CONTAINER IS ");
    console.log(this.props.receiveData);

    return (
      <div className={style.normal}>

      </div>
    );
  }
}

function mapStateToProps(state: RootState) {
  return {
    receiveData: state.receiveData
  };
}

function mapDispatchToProps(dispatch) {
  return {

  };
}

This is what I get from console.log:

This is what I get from <code>console.log</code>

So how to get this values from JSON?

Upvotes: 10

Views: 49221

Answers (5)

ramkumar
ramkumar

Reputation: 1

import  Axios  from "axios";
import React ,{useState,useEffect}from "react";
import {useNavigate} from 'react-router-dom';

const FrtchData = () =>
{
    const navigate = useNavigate();
   
         const [users,setUsers] =useState([])
        useEffect (() =>{
            const asynfunc=async () =>{
                await Axios.get('https://fakestoreapi.com/products')
                .then(res=>setUsers(res.data))
            }
            asynfunc()
        },[])
        
        return (<div>
            {
                users.map((users,index) => <li key={index}>{users.title} </li>)
            }
            <button onClick={()=>navigate("/home")}>Logout</button>
        </div>)

}
export default FrtchData

Upvotes: 0

ramkumar
ramkumar

Reputation: 1

import  Axios  from "axios";
import React ,{useState}from "react";
import { useNavigate} from 'react-router-dom';

const FrtchData = () =>
{
    const navigate = useNavigate();
const [emp,setEmp]=useState([])
Axios.get("https://fakestoreapi.com/products")
.then(res=>setEmp(res.data))

return (
    <div>

    {
        emp.map((emp,index) => <li key={index}>{emp.title}</li>)
    }
     <button onClick={()=>navigate("/home")}>Logout</button>
     
    </div>
)

}
export default FrtchData

Upvotes: 0

bkmalan
bkmalan

Reputation: 183

If you've received text instead of JSON,just like I did,

With async/await, it's simply,

let results = await axios.get("http://localhost:3004/paymentReceipts")
try {
  let response = JSON.parse(results.request.response)  
  dispatch({ type: Actions.RECEIVE_DATA, payload: response })
} catch(err) {
  dispatch({type: Actions.FETCH_DATA_ERROR, payload: err})
}

Upvotes: 2

Piyush Dhamecha
Piyush Dhamecha

Reputation: 1515

You will get all your data into response.data.

axios.get("http://localhost:3004/paymentReceipts")
  .then((response) => {
    dispatch({ type: Actions.RECEIVE_DATA, payload: response.data }) //Change
  }).catch((err) => {
    dispatch({type: Actions.FETCH_DATA_ERROR, payload: err})
  })

Upvotes: 14

Nocebo
Nocebo

Reputation: 2017

To access a single attribute within your json-response you can simply do:

response.data.<attribute>

e.g.: 

   axios.get("http://localhost:3004/paymentReceipts")
  .then((response) => {
    dispatch({ type: Actions.RECEIVE_DATA, payload: response.data, id: response.data.id }) //Change
  }).catch((err) => {
    dispatch({type: Actions.FETCH_DATA_ERROR, payload: err})
  })

Depending on the structure of your json and how it's formatted (e.g. array of objects) you have to iterate through it.

Upvotes: 6

Related Questions