Ожидание «ID», «STRING», «NUMBER», «BOOLEAN», «UNDEFINED», «NULL», «DATA», получило «INVALID»

Я хочу получить общее количество звезд моей учетной записи github, но когда я запускаю свой сервер, клиент выдает сообщение об ошибке:

... data-increment = "{{ metadata[stargazers_ -----------------------^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'

Я использовал экспресс-сервер с рулем для рендеринга.

function parseData(response, user) {
    var checkLang = {};
    const metadata = response.reduce(function(acc, currentItem) {
        acc.stargazers_count += currentItem.stargazers_count;
        if (checkLang[currentItem.language]) {
            checkLang[currentItem.language] = checkLang[currentItem.language] + 1;
        } else {
            checkLang[currentItem.language] = 1;
        }
        return acc;
    }, { stargazers_count: 0 });

    metadata["languages"] = Object.keys(checkLang).map(item => {
        return {
            value: (checkLang[item] / response.length) * 100,
            title: item
        };
    });

    metadata["mainlanguage"] = Object.keys(checkLang).reduce(function(a, b) {
        return checkLang[a] > checkLang[b] ? a : b;
    });

    return metadata;
}

route.get("/:id", function(req, res) {
    axios
        .get("https://api.github.com/users/" + req.params.id)
        .then(user => {
            axios
                .get("https://api.github.com/users/" + req.params.id + "/repos")
                .then(response => {
                    var getMetadata = parseData(response.data, user.data);

                    res.render("private", {
                        response: response.data,
                        user: user.data,
                        metadata: getMetadata
                    });
                })
                .catch((e) => {
                    console.info(e);
                    res.render("404");
                });
            })
            .catch((e) => {
                console.info(e);
                res.render("404");
            });
        });
});

результат.hbs

<div
    class = "meta-value numscroller"
    data-max = "{{ metadata.stargazers_count }}"
    data-min = "0"
    data-delay = "1"
    data-increment = "{{ metadata[stargazers_count] / 10 > 0 ? metadata[stargazers_count] / 10 : 1 }}"
>
    {{ metadata.stargazers_count }}
</div>

Я ожидаю, что он отобразит общее количество звезд.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
6 899
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема вызвана вашим шаблоном руля. В атрибуте data-increment вы используете metadata[stargazers_count], что приводит к сбою.

Обратите внимание, что не рекомендуется размещать много логики в шаблоне руля. Итак, чтобы решить вашу проблему, я бы вычислил значение increment и добавил его к вашему объекту metadata следующим образом:

function parseData(response, user) {
    var checkLang = {};
    const metadata = response.reduce(function(acc, currentItem) {
        acc.stargazers_count += currentItem.stargazers_count;
        if (checkLang[currentItem.language]) {
            checkLang[currentItem.language] = checkLang[currentItem.language] + 1;
        } else {
            checkLang[currentItem.language] = 1;
        }
        return acc;
    }, { stargazers_count: 0 });

    metadata["languages"] = Object.keys(checkLang).map(item => {
        return {
            value: (checkLang[item] / response.length) * 100,
            title: item
        };
    });

    metadata["mainlanguage"] = Object.keys(checkLang).reduce(function(a, b) {
        return checkLang[a] > checkLang[b] ? a : b;
    });

    metadata.increment = metadata.stargazers_count / 10 > 0 ? metadata.stargazers_count / 10 : 1;

    return metadata;
}

Я добавляю атрибут increment со значением, которое вы пытались вычислить в шаблоне руля.

Теперь вашему шаблону руля нужно использовать только этот атрибут:

<div
    class = "meta-value numscroller"
    data-max = "{{ metadata.stargazers_count }}"
    data-min = "0"
    data-delay = "1"
    data-increment = "{{ metadata.increment }}"
>
    {{ metadata.stargazers_count }}
</div>

Другие вопросы по теме