JavaScript проблема преобразования строк внутри объекта (внутри l oop)

Question

При создании модуля карусели для Joomla у меня возникают 2 JavaScript проблемы, которые я не могу исправить. Пробую 2 дня. Надеюсь, кто-то здесь сможет указать, что я делаю неправильно.

1. Я не могу получить логическое значение из строки "0" или строки "1" И я не могу
2. И я не могу JSON.parse() в преобразовать строку объекта в JavaScript объект

Ситуация:

Чтобы иметь возможность иметь несколько экземпляров на одной странице, я передаю индивидуальные настройки каждого модуля (через php) одному объекту в моем javascript файле. Каждый модуль - это 1 пара значений ключа внутри объекта, значение которого является его собственным объектом настроек. В основном, это то, как JS получает это:

const moduleSettings = {
    "103":{"items":3,"margin":5,"loop":"1","center":"0","responsive":"{0:{items:1}}"},
    "105":{"items":3,"margin":5,"loop":"0","center":"1","responsive":"{0:{items:2}}"}
};

Затем мне нужно l oop для каждого модуля, чтобы инициализировать настройки. Это делается в готовом виде с использованием jQuery.

jQuery(document).ready(function() {

    // Loop over each module
    const modules = Object.keys(moduleSettings);
    for (const id of modules) {

        const target = "carousel-" + id;
        const params = moduleSettings[id];

        // Callback to evaluate true/false params
        function eval(singleParam) {
            return params[singleParam] === "1";
        };

        // Initialize carousel
        jQuery(target).owlCarousel({
            items: params.items,
            margin: params.margin,
            loop: eval("loop"),
            center: eval("center"),
            responsive: JSON.parse(params.responsive)
        });

    };

});

Свойства карусели items и margin являются числами. Здесь нет проблем, но они получаются как числа с самого начала.

Проблема:

1. Свойства loop и center должны возвращать логическое значение, основанное на функции обратного вызова eval(). Но они просто возвращают строку "0" или "1".
2. Свойство responsive должно возвращать объект. Но это все еще остается строковым объектом "{...}".

Ошибка консоли:

Первая проблема выше не блокирует функциональность. Это работает, но я хочу понять, почему мои значения не являются логическими.

Однако вторая проблема вызывает консольную ошибку и заставляет карусель не работать. Это только если ответ не является пустой строкой. Когда response - пустая строка, она работает. Но мне нужна адаптивная настройка.

Я искал причину этой проблемы уже 2 дня. Это расстраивает. Любые указатели были бы наиболее полезны. Спасибо!

Answer 1

вместо использования функции eval можно использовать ниже

       jQuery(target).owlCarousel({
            items: params.items,
            margin: params.margin,
            loop: !!params.loop,
            center: !!params.center,
            responsive: JSON.parse(params.responsive)
        });

Для второй проблемы вам необходимо изменить структуру кода на стороне сервера, чтобы сгенерировать настройки этого модуля JSON. Адаптивный объект не является правильным JSON. он должен выглядеть примерно так:

responsive: {items:1} или responsive: [{items:1}]

Если вы можете опубликовать этот код, я могу сказать вам, какие изменения необходимо внести в него.

Answer 2

В приведенном вами примере вы оцениваете поле params не по имени, предоставленному как аргумент singleParam, а по фактическому полю params.singleParam, то есть undefined. Чтобы получить поле по его имени, используйте синтаксис скобок: params[singleParam].