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:


html code:

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

I get the 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>
  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