时间戳

首页 > 解决方案 > 为什么我的服务器不能完全读取我的 json 文件？

javascript - 为什么我的服务器不能完全读取我的 json 文件？

问题描述

我在 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 并将对象的每个部分附加到蓝色框，如下所示：（粗体）歌曲 - 艺术家。心情：心情。我的应用程序应该监听 public/fav.json 的请求，然后发送它。

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

标签： javascriptjsonexpress

解决方案

您正在遍历列表，然后设置 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;

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

推荐阅读