使用Vue Javascript将JSON数据提取到html文件中的表中的问题答案

【问题标题】：Problem with extracting JSON data into a table in html file using Vue Javascript使用Vue Javascript将JSON数据提取到html文件中的表中的问题
【发布时间】：2020-04-05 22:42:48
【问题描述】：

这也是我的带有 Vue Js 代码的 HTML 文件：

    <!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>

我的 Node JS server.js 文件：

//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)
    })
})

当您访问 localhost:8080/finalgame 时会为您提供以下数据：

[{"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}]

我想使用 vue js 将这些 JSON 数据逐行显示到我的表中，因为与使用 AJAX 的 HTTPRequest 相比，它显然很容易使用。我去 localhost:8080/index.html 时得到的输出：

名称描述价格我已经坚持了好几天了。请帮忙。

【问题讨论】：

标签： html node.js json vue.js axios

【解决方案1】：

如果你得到的东西，看起来像......

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

这意味着没有data 属性，但你得到的是一个数组。所以试试：

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

然后和其他答案一样，检查外壳。您的回复中有小写字母，所以应该是

{{ game.name }} 和 {{game.description}}

【讨论】：

非常感谢，现在可以使用了。这么菜鸟的错误，再次感谢。
没问题，很高兴能帮上忙！ :)

【解决方案2】：

检查外壳。响应返回 [{"name": "..."}]，您的 Vue 模板显示 {{game.Name}}。

应该是{{game.name}}

【讨论】：

完成。除了名称描述价格相同的三个表头之外，仍然一无所获