Loop json with Vue.js to populate a html table

Question

On page load I fetch some data in json format from the database. Now I would like to use Vue.js to loop that json and build a html table.

Javascript/Vue.js part:

callStocks = function () {
          var app = new Vue({
            delimiters: ["[[", "]]"],
            el: "#stocksTerminal",
            data: {
              stocks: []
            },
            created() {
              axios
                .get("getStocksAvailable/")
                .then(response => {
                  this.stocks = response.data.data;
                  console.log(response.data.data[0].fields.stockName);
                });
            }
          });
};

callStocks();

HTML structure:

<table>
 <thead>
  <tr>
   <th>Company</th>
  </tr>
 </thead>
 <tbody id="stocksTerminal">
 <tr>
  <td v-for="item in stocks">[[ item.fields.stockName ]]</td>
 </tr>
 </tbody>
</table>

Json object:

Right now the frontend doesn't render anything. However I don't have any errors from Vue and the implemented console.log shows the correct item Infineon in the above example. I assume that the transmission from Vue to the variable in the fronend doesn't work.

Note: I use [[...]] delimiter since my Django framework preserves curly brackets. I have this in another project running successfully and this shouldn't be the issue here.

You iterate as v-for="stockName in info", but you never use stockName inside the loop. — Robo Robok
– Robo Robok, Commented May 17, 2020 at 16:04
Is the above output for console.log(response.data); or console.log(response);? — gaganshera
– gaganshera, Commented May 17, 2020 at 16:13
Are you sure? Can you try console.log(response.data.info.data) ? Does this five you the array list like 0: Object {fields: Object {}} — gaganshera
– gaganshera, Commented May 17, 2020 at 16:15
This is a very simple issue but needs some testing. Please create a small demo for this using codesandbox.io to show the issue happening. — palaѕн
– palaѕн, Commented May 17, 2020 at 16:16

thanhdx · Accepted Answer · 2020-05-18 01:40:25Z

1

// Update: The json on vue devtool show that info is not an array you want, you may do this: this.info = response.data.data in the .then to get the correct data.

Then try this

<td v-for="stockName in info">[[ stockName.fields.stockName ]]</td>

Use stockName in template

edited May 18, 2020 at 1:40

answered May 17, 2020 at 16:08

thanhdx

6184 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JSRB Over a year ago

doesn't render still :/

JSRB Over a year ago

:adjusted it, the json looks better now, but it still doesn't render anything

thanhdx Over a year ago

Please make a demo on codesandbox.io as @palash's comment for further testing

JSRB Over a year ago

tried to figure out how to use this sandbox, but seems to be the even bigger challenge lol. When console.log(response.data.data[0].fields.stockName) it returns Infineon which is just right.

thanhdx Over a year ago

It should works normal as example here: jsbin.com/takebavefi/edit?html,output

Collectives™ on Stack Overflow

Loop json with Vue.js to populate a html table

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related