Problem with extracting JSON data into a table in html file using Vue Javascript

Question

This is my HTML file with Vue Js code as well:

    <!DOCTYPE html>
<html>

<head>

    <!-- Vue development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Axios library -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <div id="app">
    <table>
        <thead>
            <tr>
                <th>name</th>
                <th>description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="game in games">
                <td>{{game.Name}}</td>
                <td>{{game.Description}}</td>
                <td>{{game.price}}</td>
            </tr>
        </tbody>
    </table>
    </div>

    <script>

    const app = new Vue({
        el: '#app',
        data: {
            games: []
        },
        methods : {
            //get all the products from the web service using Axios
            loadAllProducts: function(){
                var localApp = this;
                axios.get('/finalgame') //send GET request to games path
                .then(function (response){
                    //returned array of games
                    localApp.games = response.data.data;
                    console.log(JSON.stringify(response.data.data));
                })
                .catch(function (error){
                    //handle error
                    console.log(error);
                });
            }
        },
        created: function(){
            this.loadAllProducts();

            //refreshes every 5 seconds
            setInterval(this.loadAllProducts, 4000);
        }
    })

    </script>

My Node JS server.js file:

//Import the express and url modules
var express = require('express');
var url = require("url");

//Status codes defined in external file
require('./http_status');

//The express module is a function. When it is executed it returns an app object
var app = express();

//Import the mysql module
var mysql = require('mysql');

//use index html page
app.use(express.static('./public'))

//Start the app listening on port 8080
app.listen(8080);

//Create a connection object with the user details
var connectionPool = mysql.createPool({
    connectionLimit: 10,
    host: "localhost",
    user: "root",
    password: "",
    database: "pricen",
    debug: false
});

app.get('/messages', (req, res) => {
    console.log("show messages")
    res.end()
})

app.get('/index.html', (req, res) =>{
    res.sendFile(__dirname + '/index.html');
})


//URL to get all game products with price
app.get('/finalgame', (req, res) => {
    console.log("Fetching game product with prices by joining table: " + req.params.id)
    const sqlquery = "SELECT name, description, price FROM game" + " INNER JOIN price ON game.id = game_id"
    connectionPool.query(sqlquery, (err, rows, fields) => {
        console.log("user success!")
        res.json(rows)
    })
})

When you go to localhost:8080/finalgame gives you this data:

[{"name":"Fifa 19...","description":"Fifa 19 game","price":29.85}, 
{"name":"Fifa 20...","description":"Fifa 20 game","price":29.85}, 
{"name":"name":"Far Cry 4...","description":"Far Cry 4...","price":14.85}]

I want to display this JSON data into my table row by row using vue js because apparently it's easy to use compare it to HTTPRequest using AJAX. The output I get when I go to the localhost:8080/index.html:

name description Price I am stuck on this for days now. Please help.

AVJT82 · Accepted Answer · 2019-12-12 18:47:18Z

1

If what you get returned, looks like...

[{"name":"Fifa 19...","description":"Fifa 19 game","price":29.85}.....]

it means that there is no data property, but what you get is an array. So try:

.then(function (response){
   // remove the extra 'data'   
   localApp.games = response.data;
   console.log(JSON.stringify(response.data));
})

Then as in other answer, check the casing. You have lowercase in your response, so should be

{{ game.name }} and {{game.description}}

answered Dec 12, 2019 at 18:47

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

Vinay Over a year ago

Thank you so much, it works now. Such a rookie mistake, again thank you.

AVJT82 Over a year ago

No problem, glad I could help! :)

Joe Lewis · Accepted Answer · 2019-12-12 14:04:58Z

1

Check the casing. The response returns [{"name": "..."}] and your Vue template shows {{game.Name}}.

It should be {{game.name}}

answered Dec 12, 2019 at 14:04

Joe Lewis

2,0002 gold badges19 silver badges21 bronze badges

1 Comment

Vinay Over a year ago

Done. Still getting nothing but the same three table headers with name description Price

Collectives™ on Stack Overflow

Problem with extracting JSON data into a table in html file using Vue Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related