Issue in accessing API/json with multiple sections - json

Question

I'm trying to display all sections of the following json file into my reactjs page: https://api.myjson.com/bins/cdres
below is the code:
import React, { Component } from 'react';
import {render} from "react-dom";
class apps extends Component {
state = {
data: {
segments: [],
totals: [],
}
}
componentWillMount(){
fetch('https://api.myjson.com/file', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json',
'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
},
}
) /*end fetch */
.then(results => results.json())
.then(data => this.setState({ data: data }))
}
render() {
console.log(this.state.data);
return (
<div className="clientContainer">
{
this.state.data.segments.map( item =>(
<div>
<span> {item.clientName} </span>
</div>
))
}
{
this.state.data.totals.map(item =>(
<div>
<span> {item.segmentType} </span>
<span> {item.adjTotalSqrFt} </span>
</div>
))
}
</div>
);
}
}
export default app;
...the code works for consuming data from the segments and totals section of the json file, but am having trouble getting the id and username from the top section?

Answer 1

data is an object rather than an array so calling map on it triggers an error.
Simply do this.state.data.segments.map(...) instead, and change your initial state to
state = { data: { segments: [] } }

Answer 2

map is a function of array. The data is an object while data.segments is an array. You will need to change the code as below
<div className="clientContainer">
{
this.state.data.segments.map( item =>( //change here
<div>
<span> {item.clientName} </span>
</div>
))
}
</div>