Question

我在fav.json的函数中发出了一个get请求，并编程了id =“ fav_button”按钮来运行该函数，然后设置了一个快速服务器。但是，当我单击按钮时，它仅显示json文件中的最后一项。正在获取的json文件是对象数组。

我尝试使用.send而不是.json以及.sendFile。我已经尝试调试json文件，但是没有问题。我尝试使用jquery代替，但这没什么区别。

// script.js
function get_fav(e) {
    if (!e) {
        e = window.event;}
    el = e.target || e.srcElement;
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if (xhr.status === 200) {
            let list = JSON.parse(xhr.response);
            for (var i in list) {
                let hold = fav_tem;
                hold = hold.replace('%title', list[i].song);
                hold = hold.replace('%artist', list[i].artist);
                hold = hold.replace('%mood', list[i].mood);
                document.getElementById('faves_field').innerHTML = hold;}}};
    xhr.open('GET', 'fav.json', true);
    xhr.send();}
const fav_el = document.getElementById('fav_button');
if (fav_el.addEventListener) {
    fav_el.addEventListener('click', get_fav, false);}
else {fav_el.onclick = get_fav;}...


// app.js
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const fs = require('fs');

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.send(fs.readFileSync('public/index.html'));
});

app.get('public/fav.json', function(req, res) {
    res.json(fs.readFileSync('public/fav.json'));
});...

...app.listen(3003, function() {
       console.log('Server started on port 3003...');
   });

我的脚本应该请求fav.json并将对象的每个部分附加到蓝色框，如下所示：（以粗体显示）Song-artist。情绪：情绪。我的应用程序应该监听public / fav.json的请求，然后发送。

但是，由于某种原因，当我单击分配的按钮时，它仅在下面的蓝色框中显示json文件的最后一个对象。这是整个项目的链接（我对Web开发不是很有经验）：https://github.com/YungLonk/Practice-Node-JS。我想念什么或做错什么了？

Answer 1

您正在遍历列表，然后设置html。总是将其设置为列表中的最后一项。

        for (var i in list) {
            let hold = fav_tem;
            hold = hold.replace('%title', list[i].song);
            hold = hold.replace('%artist', list[i].artist);
            hold = hold.replace('%mood', list[i].mood);
            document.getElementById('faves_field').innerHTML = hold;
        };

您应该将包含数据和html属性的变量放在循环之外

    let hold = fav_tem;
    for (var i in list) {
        hold = hold.replace('%title', list[i].song);
        hold = hold.replace('%artist', list[i].artist);
        hold = hold.replace('%mood', list[i].mood);
    };

    document.getElementById('faves_field').innerHTML = hold;

编辑：

我刚刚浏览了您的项目，发现fav_tem只有一项（在我看来，我认为其中包含许多项）。因此，一旦完成替换，就完成了。它不能再次替换它，因为文本不再存在。

因此，在这种情况下，您将要追加。见下文：

    let favitems = "";
    for (var i in list) {
        let hold = fav_tem;
        hold = hold.replace('%title', list[i].song);
        hold = hold.replace('%artist', list[i].artist);
        hold = hold.replace('%mood', list[i].mood); 
        favitems = favitems + "<br />" + hold;
    };

    document.getElementById('faves_field').innerHTML = favitems;

让我知道怎么回事，我相信这就是您想要的。

为什么我的服务器无法完全读取我的json文件？

1 个答案: