使用Vue Javascript将JSON数据提取到html文件中的表中的问题
Posted
技术标签:
【中文标题】使用Vue Javascript将JSON数据提取到html文件中的表中的问题【英文标题】：Problem with extracting JSON data into a table in html file using Vue Javascript 【发布时间】：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 时得到的输出：
名称描述价格 我已经坚持了好几天了。请帮忙。
【问题讨论】：
【参考方案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
【讨论】：
完成。除了名称描述价格相同的三个表头之外，仍然一无所获以上是关于使用Vue Javascript将JSON数据提取到html文件中的表中的问题的主要内容，如果未能解决你的问题，请参考以下文章
如何使用从 javascript/html 中的外部 php 文件中提取的 JSON 数据？
使用 JavaScript React Native 从 API 的 json 对象中提取数据