Not able to retrieve data from JSON object in Vue

Question

I'm creating a small application using Vue js framework that uses the CryptoCompare API, but I'm unable to retrieve the data from the response. Have a look at the code

<template>


<div class="container">
      <div v-for="(value,key) in cryptos" :key="key">
          {{value.LTC.FullName}}
      </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Main',
  data : () => ({
    cryptos: []
  }),

  created() {
      axios.get("https://www.cryptocompare.com/api/data/coinlist/")
        .then(response => {
            this.cryptos = response.data;
            console.log(response.data);
        })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .container{
        min-width:315px;
        min-height:560px;
        max-height: 560px;
        overflow-y: scroll;
        margin:auto;
        position: relative;
        background: #fff;
    }
</style>

Below is the response

    {
    "Response": "Success",
    "Message": "Coin list succesfully returned!",
    "BaseImageUrl": "https://www.cryptocompare.com",
    "BaseLinkUrl": "https://www.cryptocompare.com",
    "Data": {
        "LTC": {
            "Id": "3808",
            "Url": "/coins/ltc/overview",
            "ImageUrl": "/media/19782/ltc.png",
            "Name": "LTC",
            "CoinName": "Litecoin",
            "FullName": "Litecoin (LTC)",
            "Algorithm": "Scrypt",
            "ProofType": "PoW",
            "SortOrder": "2"
        }
        ...
    },
    "Type": 100
   }

It shows the error : Error in render: "TypeError: Cannot read property 'FullName' of undefined"

I also tried {{value.LTC["FullName"]}} and {{value["LTC"]["FullName"]}} but still shows the same error.

Answer 1

1) response returned by the api is an object where as you have defined cryptos as an array

2) {{value.Data.LTC.FullName}} is what should be referred in the template

This should work:

export default {
  name: 'Main',
  data () {
    return {
      cryptos: []
    }
  },
  created() {
      axios.get("https://www.cryptocompare.com/api/data/coinlist/")
        .then(response => {
            this.cryptos = [response.data];
            console.log(this.cryptos);
        })
  }
}
</script>