How to retrieve value of key from an object inside an array - arrays

Question

I'm trying to retrieve the merchant name from within the following array:
[
{
"model": "inventory.merchant",
"pk": 1,
"fields": {
"merchant_name": "Gadgets R Us",
"joined": "2020-01-06T07:16:17.365Z"
}
},
{"model": "inventory.merchant", "pk": 2, "fields": {"merchant_name": "H&M", "joined": "2020-01-07T22:21:52Z"}},
{"model": "inventory.merchant", "pk": 3, "fields": {"merchant_name": "Next", "joined": "2020-01-07T22:22:56Z"}},
{"model": "inventory.merchant", "pk": 4, "fields": {"merchant_name": "Jill Fashion", "joined": "2020-01-07T22:26:48Z"}}
]
I'm using vuejs and have used axios to fetch the above data via an api. I put in an array called merchants[]. I'm able to get any item I want from within my html using v-for i.e.
<div v-for="merchant in merchants">
<p>{{ merchant.fields.merchant_name }}</p>
</div>
However, in my .js file, doing the following does not work:
console.log(this.merchants[0].fields.merchant_name)
I get the following error in my console:
vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'fields' of undefined"
Please help
Edit:
This is my .js file. I try to log the merchants name in the console from the merchantName() computed property:
new Vue({
delimiters: ['[[', ']]'],
el: "#inventory",
data: {
gallery: true,
inCart: false,
shipping: false,
galleryView: "zoom",
ref: "",
cart: [],
isSelected: false,
selectedClass: "in_cart",
shippingCost: 2000,
inventory: [],
merchants: [],
},
methods: {
zoomGallery(){
this.galleryView = "zoom"
},
back(){
this.gallery = "thumbnail"
},
addToCart(name, merchant, price, qty, image, id){
var itemClone = {}
itemClone = {
"merchant": merchant,
"name": name,
"price": price,
"qty": qty,
"image": "/media/" + image,
"id": id,
}
this.cart.push(itemClone)
this.isSelected = true
},
removeFromCart(index){
this.cart.splice(index, 1)
},
deleteFromCart(id){
console.log(id)
// right now, any caret down button deletes any input
// I need to use components to prevent that
if (this.cart.length > 0){
index = this.cart.findIndex(x => x.id === id)
this.cart.splice(index, 1)
}
},
viewCart(){
this.gallery = false
this.shipping = false
this.inCart = true
},
viewShipping(){
this.gallery = false
this.shipping = true
this.inCart = false
}
},
computed: {
itemsInCart(){
return this.cart.length
},
subTotal(){
subTotal = 0
inCart = this.cart.length
for (i=0; i<inCart; i++) {
subTotal += Number(this.cart[i].price)
}
return subTotal
},
checkoutTotal(){
return this.subTotal + this.shippingCost
},
merchantName(){
console.log(this.merchants[0])
},
},
beforeMount() {
axios
.get("http://127.0.0.1:8000/get_products/").then(response => {
(this.inventory = response.data)
return axios.get("http://127.0.0.1:8000/get_merchants/")
})
.then(response => {
(this.merchants = response.data)
})
},
});
Edit:
Response from console.log(this.merchants) is:
[__ob__: Observer]
length: 0
__ob__: Observer
value: Array(0)
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
dep: Dep
id: 16
subs: Array(0)
length: 0
__proto__: Array(0)
__proto__: Object
vmCount: 0
__proto__:
walk: ƒ walk(obj)
observeArray: ƒ observeArray(items)
constructor: ƒ Observer(value)
__proto__: Object
__proto__: Array

Answer 1

Why you are trying to console.log this.merchants in computed property. Check for computed property of vuejs here.
Your data is empty before data from API call even come. So that's why your this.merchants is empty.
You can get you this.merchants value by using a method and run it after your api call or watching that like this:
watch: {
merchants: function () {
console.log(this.merchants)
}
}
It will console this.merchants array everytime a change happens in it.