title: How to retrieve value of key from an object inside an array
body: <p>I'm trying to retrieve the merchant name from within the following array:</p>
  
  <pre><code>[
    {
      "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&amp;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"}}
  ]
  </code></pre>
  
  <p>I'm using vuejs and have used axios to fetch the above data via an api. I put in an array called <code>merchants[]</code>. I'm able to get any item I want from within my html using v-for i.e.</p>
  
  <pre><code>&lt;div v-for="merchant in merchants"&gt;
    &lt;p&gt;{{ merchant.fields.merchant_name }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, in my .js file, doing the following does not work:</p>
  
  <pre><code>console.log(this.merchants[0].fields.merchant_name)
  </code></pre>
  
  <p>I get the following error in my console:</p>
  
  <pre><code>vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'fields' of undefined"
  </code></pre>
  
  <p>Please help</p>
  
  <p>Edit:
  This is my .js file. I try to log the merchants name in the console from the <code>merchantName()</code> computed property:</p>
  
  <pre><code>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 &gt; 0){
          index = this.cart.findIndex(x =&gt; 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&lt;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 =&gt; {
          (this.inventory = response.data)
          return axios.get("http://127.0.0.1:8000/get_merchants/")
        })
        .then(response =&gt; {
          (this.merchants = response.data)
        })
    },
  });
  
  </code></pre>
  
  <p>Edit:
  Response from console.log(this.merchants) is:</p>
  
  <pre><code>[__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
  </code></pre>