Почему мой сервер не читает полностью мой файл json?

Question

Я сделал запрос get в функции для fav.json и запрограммировал кнопку 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- художник.Настроение: настроение (я).Мое приложение должно прослушивать запрос для public / fav.json, а затем отправлять его.

Однако по какой-то причине, когда я нажимаю на выделенную кнопку, оно отображает только последний объект файла json всиняя коробка ниже.Вот ссылка на полный проект (я не очень разбираюсь в веб-разработке): 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;

Дайте мне знать, как это происходит, я верю, что это то, что вы ищете.