JSON parser with child
I have this Json file:
{
"id":0,
"leagueCaption":"League Two",
"rankings":[
{
"id":0,
"position":1,
"teamName":"Portsmouth",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":2,
"teamName":"Plymouth Argyle",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":3,
"teamName":"Doncaster Rovers FC",
"wins":25,
"draws":10,
"losses":11,
"points":85
}
]
}
I'm trying to render a list using map, however I can not render it by having the child rankings,
I need to render the leaguecaption as a Title, and the rankings on the grid,
I did this, but it still is not working, it returns me an error saying that it is not possible to render,
My request:
getItems(event) {
event.preventDefault();
this.setState({ 'isLoading': true });
API.getRanking(this.state.code)
.then(items => this.setState({ items, 'isLoading': false }))
.catch(error => this.setState({ error, isLoading: false }));
}
My component:
render() {
return (
<div>
<table className="pure-table">
<thead>
<tr>
<th className="itemGrid">Position</th>
<th className="itemGrid">Points</th>
<th className="itemGrid">Name</th>
<th className="itemGrid">Wins</th>
<th className="itemGrid">Draws</th>
<th className="itemGrid">Defeats</th>
</tr>
</thead>
<tbody>
{
this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
)
}
My screen render:
return (
<div className="container" >
<div className="header">
<h1>Championship of Football</h1>
</div>
<ChampionshipForm
onSubmit={this.getItems}
controlId='form'
id="code"
name="code"
value={this.state.code}
onChange={this.setCode.bind(this)}
/>
<RankingTable items={this.state.items}/>
</div>
);
Error message:
javascript json reactjs list axios
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
add a comment |
I have this Json file:
{
"id":0,
"leagueCaption":"League Two",
"rankings":[
{
"id":0,
"position":1,
"teamName":"Portsmouth",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":2,
"teamName":"Plymouth Argyle",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":3,
"teamName":"Doncaster Rovers FC",
"wins":25,
"draws":10,
"losses":11,
"points":85
}
]
}
I'm trying to render a list using map, however I can not render it by having the child rankings,
I need to render the leaguecaption as a Title, and the rankings on the grid,
I did this, but it still is not working, it returns me an error saying that it is not possible to render,
My request:
getItems(event) {
event.preventDefault();
this.setState({ 'isLoading': true });
API.getRanking(this.state.code)
.then(items => this.setState({ items, 'isLoading': false }))
.catch(error => this.setState({ error, isLoading: false }));
}
My component:
render() {
return (
<div>
<table className="pure-table">
<thead>
<tr>
<th className="itemGrid">Position</th>
<th className="itemGrid">Points</th>
<th className="itemGrid">Name</th>
<th className="itemGrid">Wins</th>
<th className="itemGrid">Draws</th>
<th className="itemGrid">Defeats</th>
</tr>
</thead>
<tbody>
{
this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
)
}
My screen render:
return (
<div className="container" >
<div className="header">
<h1>Championship of Football</h1>
</div>
<ChampionshipForm
onSubmit={this.getItems}
controlId='form'
id="code"
name="code"
value={this.state.code}
onChange={this.setCode.bind(this)}
/>
<RankingTable items={this.state.items}/>
</div>
);
Error message:
javascript json reactjs list axios
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
1
Are you initializingstate.itemsas an empty array? If you aren't there will be a moment wheremap()is executing againstundefined, hence the error. Either initialize in the parent component'sstate.itemsas an empty arrayor use defaultProps (empty array) in the child. Or use conditional rendering along the lines ofthis.state.items && this.state.items.length.
– Alexander Staroselsky
Nov 16 '18 at 1:52
add a comment |
I have this Json file:
{
"id":0,
"leagueCaption":"League Two",
"rankings":[
{
"id":0,
"position":1,
"teamName":"Portsmouth",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":2,
"teamName":"Plymouth Argyle",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":3,
"teamName":"Doncaster Rovers FC",
"wins":25,
"draws":10,
"losses":11,
"points":85
}
]
}
I'm trying to render a list using map, however I can not render it by having the child rankings,
I need to render the leaguecaption as a Title, and the rankings on the grid,
I did this, but it still is not working, it returns me an error saying that it is not possible to render,
My request:
getItems(event) {
event.preventDefault();
this.setState({ 'isLoading': true });
API.getRanking(this.state.code)
.then(items => this.setState({ items, 'isLoading': false }))
.catch(error => this.setState({ error, isLoading: false }));
}
My component:
render() {
return (
<div>
<table className="pure-table">
<thead>
<tr>
<th className="itemGrid">Position</th>
<th className="itemGrid">Points</th>
<th className="itemGrid">Name</th>
<th className="itemGrid">Wins</th>
<th className="itemGrid">Draws</th>
<th className="itemGrid">Defeats</th>
</tr>
</thead>
<tbody>
{
this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
)
}
My screen render:
return (
<div className="container" >
<div className="header">
<h1>Championship of Football</h1>
</div>
<ChampionshipForm
onSubmit={this.getItems}
controlId='form'
id="code"
name="code"
value={this.state.code}
onChange={this.setCode.bind(this)}
/>
<RankingTable items={this.state.items}/>
</div>
);
Error message:
javascript json reactjs list axios
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
I have this Json file:
{
"id":0,
"leagueCaption":"League Two",
"rankings":[
{
"id":0,
"position":1,
"teamName":"Portsmouth",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":2,
"teamName":"Plymouth Argyle",
"wins":26,
"draws":9,
"losses":11,
"points":87
},
{
"id":0,
"position":3,
"teamName":"Doncaster Rovers FC",
"wins":25,
"draws":10,
"losses":11,
"points":85
}
]
}
I'm trying to render a list using map, however I can not render it by having the child rankings,
I need to render the leaguecaption as a Title, and the rankings on the grid,
I did this, but it still is not working, it returns me an error saying that it is not possible to render,
My request:
getItems(event) {
event.preventDefault();
this.setState({ 'isLoading': true });
API.getRanking(this.state.code)
.then(items => this.setState({ items, 'isLoading': false }))
.catch(error => this.setState({ error, isLoading: false }));
}
My component:
render() {
return (
<div>
<table className="pure-table">
<thead>
<tr>
<th className="itemGrid">Position</th>
<th className="itemGrid">Points</th>
<th className="itemGrid">Name</th>
<th className="itemGrid">Wins</th>
<th className="itemGrid">Draws</th>
<th className="itemGrid">Defeats</th>
</tr>
</thead>
<tbody>
{
this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
)
}
My screen render:
return (
<div className="container" >
<div className="header">
<h1>Championship of Football</h1>
</div>
<ChampionshipForm
onSubmit={this.getItems}
controlId='form'
id="code"
name="code"
value={this.state.code}
onChange={this.setCode.bind(this)}
/>
<RankingTable items={this.state.items}/>
</div>
);
Error message:
javascript json reactjs list axios
javascript json reactjs list axios
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
asked Nov 16 '18 at 1:47
Jefferson BruchadoJefferson Bruchado
389314
389314
1
Are you initializingstate.itemsas an empty array? If you aren't there will be a moment wheremap()is executing againstundefined, hence the error. Either initialize in the parent component'sstate.itemsas an empty arrayor use defaultProps (empty array) in the child. Or use conditional rendering along the lines ofthis.state.items && this.state.items.length.
– Alexander Staroselsky
Nov 16 '18 at 1:52
add a comment |
1
Are you initializingstate.itemsas an empty array? If you aren't there will be a moment wheremap()is executing againstundefined, hence the error. Either initialize in the parent component'sstate.itemsas an empty arrayor use defaultProps (empty array) in the child. Or use conditional rendering along the lines ofthis.state.items && this.state.items.length.
– Alexander Staroselsky
Nov 16 '18 at 1:52
1
1
Are you initializing
state.items as an empty array map() is executing against undefined, hence the error. Either initialize in the parent component's state.items as an empty array this.state.items && this.state.items.length.– Alexander Staroselsky
Nov 16 '18 at 1:52
Are you initializing
state.items as an empty array map() is executing against undefined, hence the error. Either initialize in the parent component's state.items as an empty array this.state.items && this.state.items.length.– Alexander Staroselsky
Nov 16 '18 at 1:52
add a comment |
1 Answer
1
active
oldest
votes
Your question is not very clear. But i am suspecting you are accessing items before its available. Try add a simple checking like below in your component
{
this.props.items && this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
Another possible schenarion is that, items is not an array hence the reason why items.map is not a function. Can you console this.props.items in your component and it type like below
console.log(this.props.items);
console.log(typeof this.props.items)
the second console from above should print array. If not then you are passing the wrong items type.
One more thing i noticed. Your array is rankings and items is a object from your json above. Consider changing
<RankingTable items={this.state.items}/>
to
<RankingTable items={this.state.items.rankings}/>
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
1
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330319%2fjson-parser-with-child%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your question is not very clear. But i am suspecting you are accessing items before its available. Try add a simple checking like below in your component
{
this.props.items && this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
Another possible schenarion is that, items is not an array hence the reason why items.map is not a function. Can you console this.props.items in your component and it type like below
console.log(this.props.items);
console.log(typeof this.props.items)
the second console from above should print array. If not then you are passing the wrong items type.
One more thing i noticed. Your array is rankings and items is a object from your json above. Consider changing
<RankingTable items={this.state.items}/>
to
<RankingTable items={this.state.items.rankings}/>
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
1
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
add a comment |
Your question is not very clear. But i am suspecting you are accessing items before its available. Try add a simple checking like below in your component
{
this.props.items && this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
Another possible schenarion is that, items is not an array hence the reason why items.map is not a function. Can you console this.props.items in your component and it type like below
console.log(this.props.items);
console.log(typeof this.props.items)
the second console from above should print array. If not then you are passing the wrong items type.
One more thing i noticed. Your array is rankings and items is a object from your json above. Consider changing
<RankingTable items={this.state.items}/>
to
<RankingTable items={this.state.items.rankings}/>
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
1
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
add a comment |
Your question is not very clear. But i am suspecting you are accessing items before its available. Try add a simple checking like below in your component
{
this.props.items && this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
Another possible schenarion is that, items is not an array hence the reason why items.map is not a function. Can you console this.props.items in your component and it type like below
console.log(this.props.items);
console.log(typeof this.props.items)
the second console from above should print array. If not then you are passing the wrong items type.
One more thing i noticed. Your array is rankings and items is a object from your json above. Consider changing
<RankingTable items={this.state.items}/>
to
<RankingTable items={this.state.items.rankings}/>
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
Your question is not very clear. But i am suspecting you are accessing items before its available. Try add a simple checking like below in your component
{
this.props.items && this.props.items.map(function (team) {
return (
<tr key={team.id}>
<td>{team.position}</td>
<td>{team.points}</td>
<td>{team.teamName}</td>
<td>{team.wins}</td>
<td>{team.draws}</td>
<td>{team.losses}</td>
</tr>
);
})
}
Another possible schenarion is that, items is not an array hence the reason why items.map is not a function. Can you console this.props.items in your component and it type like below
console.log(this.props.items);
console.log(typeof this.props.items)
the second console from above should print array. If not then you are passing the wrong items type.
One more thing i noticed. Your array is rankings and items is a object from your json above. Consider changing
<RankingTable items={this.state.items}/>
to
<RankingTable items={this.state.items.rankings}/>
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
edited Nov 16 '18 at 3:02
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
answered Nov 16 '18 at 2:28
Nuru SalihuNuru Salihu
2,24393974
2,24393974
1
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
add a comment |
1
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
1
1
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
I've ran into this same issue before when first working with reactjs.
– WhyAyala
Nov 16 '18 at 2:37
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
With this solution worked perfectly, thank you for sharing the knowledge!
– Jefferson Bruchado
Nov 16 '18 at 9:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330319%2fjson-parser-with-child%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Are you initializing
state.itemsas an empty array? If you aren't there will be a moment wheremap()is executing againstundefined, hence the error. Either initialize in the parent component'sstate.itemsas an empty arrayor use defaultProps (empty array) in the child. Or use conditional rendering along the lines ofthis.state.items && this.state.items.length.– Alexander Staroselsky
Nov 16 '18 at 1:52