web-dev-qa-db-ja.com

axiosでjsonからデータを取得する方法は？

Axiosを使用してテーブル内のサーバー側データをJSON形式で取得しようとしていますが、id、companyInfoなどのすべてのフィールドを取得する方法がわかりません。

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})
  })

リデューサー：

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)

アプリ

@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 {

  };
}

これは私がconsole.log

では、JSONからこの値を取得する方法は？

javascriptjsonreactjsreduxaxios
5
EnzyWeiss

すべてのデータを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})
  })
7
Piyush Dhamecha

Json-response内の単一の属性にアクセスするには、次のようにします。

response.data.<attribute>

例えば。：

   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})
  })

JSONの構造とフォーマットの方法（オブジェクトの配列など）に応じて、繰り返し処理する必要があります。

4
Nocebo