<template>
        <div >
            <div >
            <div >{{coin.data.name}} Price Statistics</div>
                <table >
                    <tbody>
                        <tr>
                            <th>Price</th>
                            <td>{{coin.data.market_data.current_price.usd}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </template>
    
    <script setup>
    import { api } from '../services/api'
    import { reactive } from 'vue'
    
    const props = defineProps(['coinId'])
    
    const coin = reactive({
        data: []
    });
    
    async function fetchData() {
      try {
        coin.data = await api.get(`/coins/${props.coinId}`)
            .then((response) => {
                return response.data;
            })
      }
      catch (e) {
        console.error(e)
      }
    }
    
    fetchData()
    
    
    </script>

Hey guys, i'm struggling a lot trying to read data from an api. So, im reading this data from coingecko and when it's just on the first array it works very well. But when its an array inside an array its returns undefined when i try to refresh the page. But while i'm coding and it auto updates, it works very well. How can i treat it and make it so it doesn't show up undefined before anything?

Showing up an error While coding and it just auto refreshes

CodePudding user response：

You don't have to worry about the array in the array. When you know the format of the API data you call, you just need to get the corresponding data format. Generally, there is no need to worry. The formats of the two correspond.

CodePudding user response：

This is probably caused by the data from the api not being received when you load the table. You can fix this by adding a loading variable, which you only set to true when the api call is finished. You can use v-if to toggle the element that uses the data so it only shows when the data is available and otherwise show 'loading...'. Like:

<template>
        <div v-if="loading" >
            <div >
            <div >{{coin.data.name}} Price Statistics</div>
                <table >
                    <tbody>
                        <tr>
                            <th>Price</th>
                            <td>{{coin.data.market_data.current_price.usd}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div v-else-if="error !== ''">{{ error }}</div>
    <div v-else>Loading...</div>
</template>

<script setup>
import { api } from '../services/api'
import { ref, reactive } from 'vue'

const props = defineProps(['coinId'])

const coin = reactive({
    data: []
});

const loading = ref(false);
const error = ref('');

async function fetchData() {
  try {
    const response = await api.get(`/coins/${props.coinId}`);
    /// here you could check if response is valid for you, otherwise throw an error
    coin.data = response;
    loading.value = false;
  }
  catch (e) {
    error.value = e;
    console.error(e)
  }
}

fetchData()


</script>

You could also use the experimental Suspense component for this.

There is also another problem with your code: you use async/await and .then together. You should not do that, just pick one way or the other to deal with promises.

Hope this helps.