Cannot access value of a json object ? Cannot read property 'company_about' of undefined ? - json

Question

This is my JSON
[
{
"id": 1,
"job_id": 1,
"company_profile": "Sales and Marketing",
"company_about": "Established in 1992 , it is a renouned marketing company",
"company_product": "Ford,Mustang,Beetle",
"key_skills": "commmunication,english,spanish,german",
"qualification": "High School,Masters",
"job_description": "Must be a Local of Mumbai",
"created_at": null,
"updated_at": null
}
]
I am trying to get its values.
this is my react code to log them.
public getJobDetails = (jobid: number) => {
const JobId = jobid;
fetch('http://127.0.0.1:8000/api/jobs/detail/' + JobId)
.then(response => response.json())
.then(
responseJson => {
console.log(responseJson);
this.setState({ details: responseJson });
},
() => {
console.log(this.state.details);
}
)
.catch(error => {
console.error(error);
});
}
public render() {
const { details } = this.state;
console.log(details);
console.log(details[0]);
The console.log(details[0]) returns
{id: 1, job_id: 1, company_profile: "Sales and Marketing", company_about: "Established in 1992 , it is a renouned marketing company", company_product: "Ford,Mustang,Beetle", …}
But why does console.log(details[0].company_profile) return undefined???
The Error it gives is :
TypeError: Cannot read property 'company_about' of undefined
can anyone help??

Answer 1

Use a conditional statement in your render so that if your request isn't complete and your state doesn't have details yet it doesn't load anything.
Edit --- Sample Code (not your application, but concept of what I mean)
import React, { Component, Fragment } from 'react';
export class App extends Component {
constructor(){
super()
this.state = {
data: [],
isLoading: true
}
}
componentWillMount(){
this.fetchDetails()
}
fetchDetails = () =>{
fetch('/some/url')
.then(res => res.json())
.then( => {
this.setState({data, isLoading: false})
})
}
render() {
return (
<Fragment>
{!this.state.isLoading && <ChildComponent data={this.state.data}} />}
</Fragment>
);
}
}

Answer 2

Try more logging, e.g.:
public getJobDetails = (jobid: number) => {
const JobId = jobid;
fetch('http://127.0.0.1:8000/api/jobs/detail/' + JobId)
.then(response => response.json())
.then(
responseJson => {
console.log(`Fetch resulted in ${JSON.stringify(responseJson)}`);
this.setState({ details: responseJson });
},
() => {
// This line is supposed to act as error handler, but there is no error handling
// See this - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Syntax
console.log(this.state.details);
}
)
.catch(error => {
console.error(`Fetch resulted in error ${JSON.stringify(error)}`);
});
}
public render() {
const { details } = this.state;
console.log('Rendering...');
console.log(`step 1. ${JSON.stringify(details)}`);
// let's see if details are not undefined and try next level
details && console.log(`step 2. ${JSON.stringify(details[0])}`);

Answer 3

Your fetch code is asynchronous and you don't have a default value set for this.state You can try a couple different options. You could redefine getJobDetails to return the promise rather than changing the state:
class MyComponent extends React.Component {
public getJobDetails = (jobid: number) => {
const JobId = jobid;
return fetch('http://127.0.0.1:8000/api/jobs/detail/' + JobId)
}
public render() {
this.getJobDetails().then(response => {console.log(response[0])})
}
}
Or you can set a default state
class MyComponent extends React.Component {
public state = {
details: [...]
}
}
EDIT
Performing a network request every render cycle is not very efficient, so it's probably not the best route to go. I also forgot a third option, conditional rendering like this:
class MyComponent extends React.Component {
state = { loading: true }
getJobDetails = (jobid: number) => {
fetch(...).then((response) => {
this.setState({details: response})
this.setState({loading : false})
})
}
render() {
return this.state.loading ? <h1>Loading...</h1> : <div>{this.state.deatils}</div>
}
}
Also you should not be converting your data to JSON if you want to access it as an Object