Level 3
you want to know how to retrieve the data?
Aug 1, 2019
10
Level 1
Axios call on nested JSON api data
Hi guys,
I’m following a tutorial http://blog.vuejoy.com/4-axios/ to make an axios call to a JSON api. The code works fine when I call the source as given in the tutorial. Howevr my JSON data has a nested structure. here is the code to make the call:
created() {
//axios.get('http://jsonplaceholder.typicode.com/posts').then((response) => {
axios.get('http://myexample.com/api/node/page').then((response) => {
this.posts = response.data
})
.catch((e) => {
console.error(e)
})
}
and here is the structure of the data I want to grab:
{
"jsonapi": {
"version": "1.0",
"meta": {
"links": {
"self": {
"href": "http://jsonapi.org/format/1.0/"
}
}
}
},
"data": [
{
"type": "node--page",
"id": "c6bf24a8-8556-4c55-b7eb-cb387dbb36f5",
"attributes": {
"status": true,
"title": "API Test", //// this here
"body": {
"value": "<p>Here is some content</p>\r\n", ///// and this here
"format": "rich_text",
"processed": "<p>Here is some content</p>",
"summary": ""
},
I want to grab the title and the body value, what is the proper format for making the call?
Thanks in advance
Level 1
oops just re-read my post, forgot to add the template output:
<ul v-if="posts && posts.length">
<li v-for="post of posts" v-bind:key="post.id">
<p><strong>{{post.title}}</strong></p>
<p>{{post.body}}</p>
</li>
</ul>
I need to retrieve the data and display it
Level 3
use
this.posts = response.data.map((post) => {
return {title: post.attributes.title, body: post.attributes.body};
}
)
this maps each of the response data and returns an array of posts with title and body object only
Level 1
Didn't work, so I tried:
created() {
axios.get('http://myexample.com/api/node/page').then((response) => {
this.posts = response.data
return {id: post.data.id, title: post.data.attributes.title, body: post.data.attributes.body}
})
.catch((e) => {
console.error(e)
})
}
and for template:
<ul v-if="posts && posts.length">
<li v-for="post of posts" v-bind:key="post.id">
<p><strong>{{ title }}</strong></p>
<p>{{ body.value }}</p>
</li>
</ul>
Level 3
@ludo1960 sorry i think it should be
this.posts = response.data.data.map((post) => {
return {title: post.attributes.title, body: post.attributes.body};
}
)
Level 1
so now I have:
created() {
axios.get('http://myexample.com/api/node/page').then((response) => {
this.posts = response.data.data.map((post) => {
return {title: post.attributes.title, body: post.attributes.body};
}
)
})
.catch((e) => {
console.error(e)
})
}
and for template I have:
<ul v-if="posts && posts.length">
<li v-for="post of posts" v-bind:key="post.id">
<p><strong>{{ title }}</strong></p>
<p>{{ body }}</p>
</li>
</ul>
Nothing prints out, how to bind the post.id ?
Level 3
@ludo1960 use post.title and post.body.value in the vue template. add id like this so you can use it for key binding
this.posts = response.data.data.map((post) => {
return {id: post.id, title: post.attributes.title, body: post.attributes.body};
})
Level 1
It works, many thanks Daniel, great answer! The body text show html
tags, is there a way to format it as html?
Level 3
@ludo1960 glad i could help...select as best answer...so as to help others
Level 3
@ludo1960 you can check this out to strip tags https://stackoverflow.com/questions/5002111/how-to-strip-html-tags-from-string-in-javascript
Please or to participate in this conversation.