Vue.js: Calling Data from the api multiple times

Question

<template>
    <h1 class="text-lg text-gray-400 font-medium">Coin dashboard</h1>
    <div class="flex flex-col mt-2 w-3/4">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow overflow-hidden sm:rounded-lg">
                    <table class="min-w-full text-sm text-gray-400">
                        <thead class="bg-gray-800 text-xs uppercase font-medium">
                            <tr>
                                <th></th>
                                <th scope="col" class="px-6 py-3 text-left tracking-wider">
                                    Coin
                                </th>
                                <th scope="col" class="px-6 py-3 text-left tracking-wider">
                                    Price
                                </th>
                                <th scope="col" class="px-6 py-3 text-left tracking-wider">
                                    24h
                                </th>
                                <th scope="col" class="px-6 py-3 text-left tracking-wider">
                                    7d
                                </th>
                                <th scope="col" class="px-6 py-3 text-left tracking-wider">
                                    30d
                                </th>
                                <th scope="col" class="px-6 py-3 text-left tracking-wider">
                                    market cap
                                </th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in list.coinsList" class="bg-gray-800">
                            <tr class="bg-black bg-opacity-20">
                                <td class="pl-4">
                                    {{ index + 1}}
                                </td>
                                <td class="flex px-6 py-4 whitespace-nowrap">
                                    <img class="w-5" :src="images[index]">
                                    <span class="ml-2 font-medium">{{coins[index]}}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                     ${{ item.current_price.usd }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ item.price_change_percentage_24h }}%
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ item.price_change_percentage_7d }}%
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ item.price_change_percentage_30d }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    ${{ item.market_cap.usd }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { reactive } from 'vue'
import { api } from '../services/api'
import bitcoinImg from "../assets/bitcoin.png"
import dacxiImg from "../assets/dacxi.png"
import ethImg from "../assets/ethereum.png"
import atomImg from "../assets/atom.png"
import lunaImg from "../assets/luna.png"

const coins = ['bitcoin', 'dacxi', 'ethereum', 'cosmos', 'terra-luna-2']
const images = [bitcoinImg, dacxiImg, ethImg, atomImg, lunaImg]
const list = reactive({
    coinsList: [],
});

coins.forEach((item) => {
    api.get(`/coins/${item}`)
    .then((response) => {
        list.coinsList.push(response.data.market_data)
    })
})

</script>

Hello guys, i'm trying to learn vue and i'm facing this problem. Is there a better way to do this? I tried some other things like adding it on a onMounted but it didnt work. What should i do to reduce sometimes the list showing up out of order? How can i add the name and images to the json so i dont show them in the wrong order?

Example rendered

Answer 1

You could do something like this:

let currencies = [
 {
   coin: 'bitcoin',
   image: bitcoinImg,
   data: []
 },
 {
   coin: 'dacxi',
   image: dacxiImg
   data: []
 },
etc...
]

currencies.forEach(item => {
  api.get(`/coins/${item.coin}`)
    .then((response) => {
        item.data.push(response.data.market_data)
    })
}

Answer 2

Promise.all(
    coins.map((item, index) =>
        api
        .get(`/coins/${item}`)
        .then((response) => ({ 
          ...response.data.market_data, 
          _coin: item, // add _coin - which is coins[index]
          _image: images[index]  // add _image - which is images[index]
        }))
    )
).then((d) => (list.coinsList = d));

subtle changes to HTML as noted

<tbody v-for="(item, index) in list.coinsList" class="bg-gray-800">
  <tr class="bg-black bg-opacity-20">
    <td class="pl-4">
      {{ index + 1}}
    </td>
    <td class="flex px-6 py-4 whitespace-nowrap">
      <img class="w-5" :src="item._image"> <!-- changed -->
      <span class="ml-2 font-medium">{{item._coin}}</span> <!-- changed -->
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      ${{ item.current_price.usd }}
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {{ item.price_change_percentage_24h }}%
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {{ item.price_change_percentage_7d }}%
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {{ item.price_change_percentage_30d }}
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      ${{ item.market_cap.usd }}
    </td>
  </tr>
</tbody>