JSON data from firebase using object.entries

Question

imageThe images shows my data stored in Firebase,it is a Json data.

Error is type Error: Cannot read property 'date' of undefined, what I am doing wrong???

I want to access date from it, on clicking button show_data , date should be returned,but on the user screen.

I am unable to print it on console and user screen

import React, { Component } from "react"; //, { useState }
import "./styles.css";
import axios from "axios";

class App extends Component {
  state = {
    getData: "Date"
  };

  reloadHandler = () => {
    axios.get("https://loco-97cba.firebaseio.com/.json").then((res) => {
      const arrayObj = Object.entries(res.data).map((e) => [e[0]]);
      const arrayObj1 = Object.entries(res.data).map((e) => [e[1]]);
      console.log(arrayObj);
      console.log(arrayObj1);
      this.setState({
        getData: arrayObj1[1].date
      });
      console.log( "date", this.state.getData)
      // }
    });
  };

  render() {
    return (
      <div className="App">
        <button
          onClick={() => {
            this.reloadHandler();
          }}
        >
          GET_DATA
        </button>
        <br/>
        <br/>
        <div style={{border:"black 1px solid",height:"100px"}} >{this.state.getData}</div>
      </div>
    );
  }
}

export default App;

are you sure, that API call is returning `res` at all? Try console.logging after to see the `res` object. — Prateek Thapa, Aug 22 '20 at 02:35
yes ,, just checked , res is returning a object, amd res.data is returning the data i need — Nihal Chandwani, Aug 22 '20 at 02:40
The problem is , i m unable to access , print date from the data i stored — Nihal Chandwani, Aug 22 '20 at 02:41
yes, but where are you using `date` in your code. I don't see any mention of the `date`. — Prateek Thapa, Aug 22 '20 at 02:45
sir i edited the question , i also put a url , at which you have a dummy data, but anyways , thank you very much :) — Nihal Chandwani, Aug 22 '20 at 02:52
are you trying to get all the dates from the .json file and set it in state? — Prateek Thapa, Aug 22 '20 at 03:00
Yes sir , all the data , like clicked , date, all of them , I just tried to get one of them , but failed to do so — Nihal Chandwani, Aug 22 '20 at 03:03
[Check this out sandbox link](https://codesandbox.io/s/blue-leaf-dxhoh?file=/src/App.js) — Prateek Thapa, Aug 22 '20 at 03:05
you used object..values!!... if we want to get the array , whole array then we have to use object.entries!!! then?? — Nihal Chandwani, Aug 22 '20 at 03:17
Please let my doubt be solved, through object.values we can only convert one data at a time ,right? — Nihal Chandwani, Aug 22 '20 at 03:27
[Check the docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values#:~:text=Description-,Object.,values%20of%20the%20object%20manually.) I have absolutely no clue what you're saying. — Prateek Thapa, Aug 22 '20 at 03:31

score 1 · Accepted Answer · answered Aug 22 '20 at 03:49

Below statement will not log your dates into the console. Because setState will take time to actually reflects the values.

console.log( "date", this.state.getData)

Instead what you can do is move that console.log into the render method so you can see the updated values each time.
One more thing you are not able to see the result on the webpage because your state this.state.getData is an array.

<div style={{border:"black 1px solid",height:"100px"}} >{this.state.getData}</div>

If you want to keep it as an array then you can map over it and print the data like this.

{this.state && this.state.getData.map(date => <div style={{border:"black 1px solid",height:"100px"}} >{date}</div>)}

Otherwise, just try this -

<div style={{border:"black 1px solid",height:"100px"}} >{this.state.getData[0]}</div>

See this -

JSON data from firebase using object.entries

1 Answers1