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

Question

I made a get request in a function for fav.json and programmed the id="fav_button" button to run the function, and I set up an express server. However, when I click the button, it only displays the last item in the json file. The json file being fetched is an array of objects.

I have tried using .send instead of .json as well as .sendFile. I have tried debugging the json file, but there are no issues. I have tried using jquery instead, but it makes no difference.

// 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...');
   });

My script is supposed to request fav.json and append each part of the object to the blue boxes like this: (in bold) Song - artist. Mood: mood(s). My app is supposed to listen for the request for public/fav.json, then send it.

However, for some reason, when I click the allocated button, it only displays the last object of the json file in the blue box below. Here's a link to the full project (I am not very experienced with web developement): https://github.com/YungLonk/Practice-Node-JS . What am I missing or doing wrong?

Answer 1

You're looping over the list, and then setting the html. This is always going to set it to the last item in list.

        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;
        };

You should put the variable that holds the data and the html property outside of the loop

    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;

EDIT:

I have just had a quick look over your project and I see that fav_tem has only one item (in my head I was thinking that it contains a number of them). So once you do the replace, then that's it. It can't replace it again because the text is no longer there.

So in that case you would want to append. See below:

    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;

Let me know how that goes, I believe that is what you're looking for.