V-FOR in array [help]

Tell me how to correctly display data from an array.

data from api:

{
“BUY”: [
{
“id”: “804380”,
“coin”: “GRLC”,
“basecoin”: “BTC”,
“price”: “0.00000183”,
“amount”: “1000.00000000”
},
{
“id”: “804373”,
“coin”: “GRLC”,
“basecoin”: “BTC”,
“price”: “0.00000182”,
“amount”: “17390.25274725”
}

console log:

array

html code:

<body>
  <div id="app">
  	<h1>{{ title }} </h1>
  	<hr>
  	<h2>Order data</h2>
  	<div v-for="order in orders">
  		<ul>
  			<li> Coin: {{ order.BUY[0].coin }}</li>
  			<li> Amount: {{ order.BUY[0].amount }}</li>
  			<li> Price: {{ order.BUY[0].price }}</li>
  		</ul>
  	</div>
  </div>
  <script src="vue.js"></script>
  <script src="main.js"></script>

I get the result:
result

Can’t figure out how I should display all the elements of the array. Thanks

You have a couple options…

  1. Use a nested loop
<div v-for="order in orders">
  <ul v-for="item in order">
    <li> Coin: {{ item.coin }}</li>
    <li> Amount: {{ item.amount }}</li>
    <li> Price: {{ item.price }}</li>
  </ul>
</div>
  1. If the nested “BUY” object is unnecessary for your purpose, re-map the objects to a flattened array, then do the loop
1 Like