cannot get data from object Uncaught TypeError: Cannot read property 'street' of undefined

Question

i have a json data like this :

"results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "romain",
        "last": "hoogmoed"
      },
      "location": {
        "street": "1861 jan pieterszoon coenstraat",
        "city": "maasdriel",
        "state": "zeeland",
        "postcode": 69217
      },
      "email": "romain.hoogmoed@example.com",
      "login": {
        "username": "lazyduck408",
        "password": "jokers",
        "salt": "UGtRFz4N",
        "md5": "6d83a8c084731ee73eb5f9398b923183",
        "sha1": "cb21097d8c430f2716538e365447910d90476f6e",
        "sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
      },
      "dob": "1983-07-14 07:29:45",
      "registered": "2010-09-24 02:10:42",
      "phone": "(656)-976-4980",
      "cell": "(065)-247-9303",
      "id": {
        "name": "BSN",
        "value": "04242023"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/83.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
      },
      "nat": "NL"
    }
  ],
  "info": {
    "seed": "2da87e9305069f1d",
    "results": 1,
    "page": 1,
    "version": "1.1"
  }
}

i made it to get data object from Axios , when i console.log(this.state.contact.location) , it displayed location object

{street: "2868 avenida de andalucía", city: "gandía", state: "región de murcia", postcode: 43796}

but when i tried console.log(this.state.contact.location.street) i get error

Uncaught TypeError: Cannot read property 'street' of undefined

here's my code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import axios from 'axios';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn
} from 'material-ui/Table';

export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          open: false,
          contact: []
        }
    }

  componentDidMount() {
    axios.get('https://randomuser.me/api/')
      .then((result) => {
          this.setState({
            contact: result.data.results[0]
          })
      })
      .catch(function (error) {
        console.log(error);
      })      
  }  

    handleToggle = () => this.setState({ open: !this.state.open });
    handleClose = () => this.setState({ open: false });
    
    render() {
      console.log(this.state.contact.location)
      //console.log(this.state.contact.location.city) i can't use this
      return (
        <div className="App">
            <AppBar
              title="My App"
              iconClassNameRight="muidocs-icon-navigation-expand-more"
              onLeftIconButtonTouchTap={this.handleToggle}   
            />   
            <Drawer 
              docked={false}
              open={this.state.open}
              onRequestChange={(open) => this.setState({ open })}>
              <MenuItem onClick={this.handleClose}>Contact List</MenuItem>
              <MenuItem onClick={this.handleClose}>To-Do List</MenuItem>
            </Drawer>  
            <Table>
              <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                <TableRow>
                  <TableHeaderColumn >No</TableHeaderColumn>
                  <TableHeaderColumn >Name</TableHeaderColumn>
                  <TableHeaderColumn >Gender</TableHeaderColumn>
                  <TableHeaderColumn >Email</TableHeaderColumn>
                  <TableHeaderColumn >Phone</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              {/* <TableBody displayRowCheckbox={false}>
                      <TableRow>
                        <TableRowColumn>{1}</TableRowColumn>
                        <TableRowColumn>{this.state.contact.name.first}</TableRowColumn>
                        <TableRowColumn>{this.state.contact.gender}</TableRowColumn>
                        <TableRowColumn>{this.state.contact.email}</TableRowColumn>
                        <TableRowColumn>{this.state.contact.phone}</TableRowColumn>
                      </TableRow>
              </TableBody>      */}
            </Table>
        </div>      
      )    
    }
}

why are you using an index array as string though? result.data.results["0"] instead of result.data.results[0] — Sagiv b.g
can you add the part where you are trying to console.log(this.state.contact.location) and console.log(this.state.contact.location.street) please? — bennygenel
You code snippet does not use .street. Impossible to give a concrete answer. Add your Console call to your code snippet, please. — iquellis

An Nguyen An Nguyen · Accepted Answer · 2017-09-05T13:55:44

Your code is good. The reason of the error is the console.log itself.

console.log(this.state.contact.location)
console.log(this.state.contact.location.city)

In the first mount, your state.contact is an empty array so that state.contact.location return undefined and state.contact.location.city give you your error. After fetching data from axios your data should be there correctly

cannot get data from object Uncaught TypeError: Cannot read property 'street' of undefined

1 Answers