₦airaland Forum

this is my script

<script>
import axios from 'axios';

export default {
data() {
return {
status: false,
responseObject: null,
response:"",
}
},
async mounted() {
try {
let response = await axios.get("http://localhost:4000/api/blogs");
this.responseObject = response.data;
console.log(response);
} catch (e) {

}
},

}
</script>

html template

<template>
<div>
<div >
<li v-for="service in responseObject">
{{ service }}
</li>
</div>

</div>
</template>

{{service}} returns this json

{
resource: "services",
status: "success",
data: [
{
service_id: "0001",
service_name: "Buy Airtime",
service_type: "airtime",
},
{
service_id: "0002",
service_name: "Buy Data",
service_type: "Data",
},
],
},

if i do {{service.service_name}} it doesn't input anything

If I am correct, your responseObject is an array containing the following:

resources
status
data

data which is an array is what you're meant loop through.

Now, what you can do is, destructure your responseObject like this.
const {resources, status, data} = responseObject.value[0]

Remember your responseObject is an array.

Then kiss your data anyhow you like.

<li v-for="service in data"> {{service}} </li>


I no test am ooo! Hope it works.

Why do you like the options API? Have you tried the composite API? Your logic will look simpler using the <script setup>

Since axios returns a promise you can use .then() to further turn the response.data to just data then loop through the values you want with .map() and arrange how you want.

Note: If the code you listed returns the json response to the console. You'll still need to JSON.parse(response.data) though I'm not that familiar with axios I typically use fetch API.

niel63:
If I am correct, your responseObject is an array containing the following:

resources
status
data

data which is an array is what you're meant loop through.

Now, what you can do is, destructure your responseObject like this.
const {resources, status, data} = responseObject.value[0]

Remember your responseObject is an array.

Then kiss your data anyhow you like.

<li v-for="service in data"> {{service}} </li>


I no test am ooo! Hope it works.

Why do you like the options API? Have you tried the composite API? Your logic will look simpler using the <script setup>

i get ReferenceError: responseObject is not defined
at VueComponent.mounted

davien:
Since axios returns a promise you can use .then() to further turn the response.data to just data then loop through the values you want with .map() and arrange how you want.

Note: If the code you listed returns the json response to the console. You'll still need to JSON.parse(response.data) though I'm not that familiar with axios I typically use fetch API.

Async/Await, Try/Catch works better for me whethere using axios or fetch... besides, that's not where his problem is.

Tunechi5:
i get ReferenceError: responseObject is not defined
at VueComponent.mounted

still await the response.data ure applying to the responseObject.

niel63:
Async/Await, Try/Catch works better for me whethere using axios or fetch... besides, that's not where his problem is.

Alright, I'm new to asynchronous requests though I know you can still use try/catch for fetch responses also. I think it's responseObject[0].value you meant to tell him by the way.

This is one thing with vue. E sweet ooo but it's not as straightforward as react. I like it still sha.

niel63:
still await the response.data ure applying to the responseObject.

dont get you this my full code


the second image is me hard coding the details it returs the json in browser

try

const {resources, status, data} = await this.responseObject.value[0];
You forgot to put the "this".

I dey road, I for help you check am well.

Console log the destructured data not the response.

niel63:
try

const {resources, status, data} = await this.responseObject.value[0];
You forgot to put the "this".

I dey road, I for help you check am well.

Console log the destructured data not the response.

not working cannot read value of [0]

your code looks fine what you missing is

response.data.responseObject

so just modify your code to this

async mounted() {
try {
let response = await axios.get("http://localhost:4000/api/blogs");
this.responseObject = response.data.responseObject;
} catch (e) {
console.log(e);
}
}

then put this in your template

<li
v-for="service in responseObject.data"
:key="service.service_id"
>
{{ service.service_name }} - {{ service.service_id }}
</li>

this should work fine

thanks @arejibadz your a life saver......been on this since yesternight..... thanks again

Tunechi5:
thanks @arejibadz your a life saver......been on this since yesternight..... thanks again

cheers happy learning