React get inner JSON object from api

Question

Update: How do I get an array (currentSchedule) within an array (response)?

I am trying to get the JSON object in "response" within the JSON code below. For instance, I want to get the title & description in "response", but it is not returning anything for me with the codes that I implemented below.

all.json

{"responseCode":200,
"responseMessage":"Channel Listing",
"response":[{
    "id":395,
    "title":"Title 1",
    "description":"Description 1",
    "currentSchedule":[{"eventId":"123456","title":"Hello Title"]}
    }]
}

App.js

class App extends Component {

constructor(props){
    super(props);
    this.state = {
        items: [],
        isLoaded: false,
    }
}


componentDidMount(){
    fetch('/all.json')
        .then(res => {
            res.json()
            })
        .then(json => {
            this.setState({
                isLoaded: true,
                items: [],
            })
        });
}

render() { 

    var { isLoaded, items } = this.state;

    if(!isLoaded) {
        return <div>Loading...</div>;
    }

    else {
        return (
        <div className="App">
            <ul>
                {items.map(item => (
                    <li key={item.id}>
                        Title: {item.title} | Description: {item.description}
                    </li>
                ))};
            </ul>
        </div>
        );
    }
    
}
}


export default App;

sathya reddy · Accepted Answer · 2021-07-12 09:42:22Z

1

You need to assign response in your setState to view it, somthing like this

componentDidMount(){
    fetch('/all.json')
        .then(res => res.json())
        .then(json => {
            this.setState({
                isLoaded: true,
                items: json.response,
            })
        }).catch(console.log);
}

edited Jul 12, 2021 at 9:42

answered Jul 12, 2021 at 9:37

sathya reddy

7773 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

HNG Over a year ago

I got this error after setting that Unhandled Rejection (TypeError): Cannot read property 'response' of undefined

sathya reddy Over a year ago

I have updated the code, try once. You forgot to return res.json()

sathya reddy Over a year ago

can you do a console.log(items) in render after destructuring it and do you see any errors in console?

HNG Over a year ago

what if there is another array within "response", how do I retrieve that? For instance if within "response" I have "currentSchedule":[{"eventId":"123456","title":"Hello Title",...]} How do I retrieve the eventId? Thanks in advance!

sathya reddy Over a year ago

if you want eventId of the first object in that array then it would be json.response[0].currentSchedule[0].eventId

|

Collectives™ on Stack Overflow

React get inner JSON object from api

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related