Как использовать app.locals. параметр внутри javascript?
Я разрабатываю приложение node.js. Я загрузил файл JSON как app.locals.parameter в app.js. то я пытаюсь использовать его в своем index.hbs.
Предполагать:
app.locals.componentData = require('./myfile.json');
когда я использовал параметр внутри своей HTML-части, как показано ниже, он работает правильно.
{{#each componentData.categories}}
<li id = "{{this.categoryName}}" name = "{{this.categoryName}}" class = "btn btn-primary btn-sm" style = "position: relative; z-index: 10; margin-bottom:3px" draggable = "true" role = "option" aria-grabbed = "false"><div><img src = "images/plugin.png" alt = "{{this.categoryDescription}}"/>{{this.categoryName}}</div></li>
{{/each}}
но когда я пытаюсь использовать параметр в своей функции javascript, он не может его распознать.
function InitComponents() {
for( var i = 0; i < componentData.categories.length; i++ ){
alert("in loop!"+i+"-"+componentData.categories[i].categoryName);
if (componentData.categories[i].categoryName.match(itemId)){
alert("here:"+componentData.categories[i].parameters.length);
createParameterList(newID,componentData.categories[i].parameters);
}
}
}
мой формат JSON выглядит следующим образом:
{
"categoryName": "xyz",
"categories": [
{
"categoryName": "ABC",
"parameters": [
{
"ParameterID": "ID",
"ParameterName": "ID",
"ParameterDefultValue": "",
"ParameterValue": "",
"ParameterDescription": "ID Description"
}]
}]
}
могу я узнать, почему система не может понять componentData.categories.length в моей части сценария?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема здесь в том, что функция InitComponents ничего не знает о app.locals. Переменная app.locals распознается внутри шаблонов. Чтобы ваш код работал, вам необходимо передать app.locals.componentData в качестве параметра функции InitComponents:
function InitComponents(componentData) {
for( var i = 0; i < componentData.categories.length; i++ ){
alert("in loop!"+i+"-"+componentData.categories[i].categoryName);
if (componentData.categories[i].categoryName.match(itemId)){
alert("here:"+componentData.categories[i].parameters.length);
createParameterList(newID,componentData.categories[i].parameters);
}
}
}
Теперь вы можете вызвать эту функцию так
InitComponents(app.locals.componentData);
и InitComponents теперь действительно знает, что такое componentData.
Если вы используете эту функцию внутри промежуточного программного обеспечения, вы можете получить доступ к app через req.app:
myMiddlewareFunction((req, res, next) => {
const app = req.app;
initComponents(app.locals.componentData);
// some other logic
})
@Amir, не могли бы вы поделиться кодом функции, внутри которой вы вызываете функцию InitComponents?
@Volodymry: Я называю это так: <button onclick = "InitComponents ()"> Инициализировать компоненты </button> [ранее] и теперь => <button onclick = "InitComponents (app.locals.componentData)"> Initializ e Компоненты </button>
Думаю, я неправильно понял ваш вопрос. Я думал, вы пытаетесь использовать componentData внутри JS на стороне NodeJS. Но насколько я понял, вы пытаетесь использовать componentData внутри скрипта внешнего интерфейса. Если это так, вам нужно получить этот файл JSON со своего сервера и назначить его переменной внутри вашего скрипта. Или вы можете вставить тег <script> в шаблон с помощью javascript, который назначит componentData глобальной переменной.
Можете ли вы изменить свой ответ на основе вашего нового понимания. потому что я новичок в NodeJS. Как я уже упоминал выше, я загрузил JSON в app.locals.componentData в app.js; Я могу успешно использовать componentData в своей части HTML, но в части сценария я не знаю, как ее использовать. :(
@Amir - это HTML, о котором вы говорите, созданный NodeJS из index.hbs?
Я попытался загрузить свой json-файл внутри тега <script> с помощью var jsonData = require ('./ myfile.json'); но похоже, что это невозможно!
@Amir, если вы хотите загрузить свой JSON, вам нужно использовать Получить API - const componentData = fetch('public.path.to.your.json').then(response => response.json());. Также вам нужно будет сделать этот JSON обслуживаемым вашим приложением NodeJS (как обслуживать статические файлы в expressjs).
Если вы хотите включить свой json внутри <script> в шаблон hbs, вы можете попробовать вставить следующее - <script>window.componentData = {{componentData}}</script>, и вы сможете использовать window.componentData в сценарии вашего браузера.
также этот ответ может вам помочь - stackoverflow.com/questions/40386257/…
когда я использовал <script> window.componentData = {{componentData}} </script>, я получаю эту ошибку: Uncaght SyntaxError: Unexpected identifier Вывод также выглядит следующим образом: <script> window.componentData = [object Object] < / script> Любая идея, что происходит?
этот ответ поможет вам с этой проблемой - stackoverflow.com/questions/10232574/…. Вам нужно будет использовать JSON.parse в сценарии браузера, чтобы преобразовать JSON в простой объект.
однако я хотел бы предложить вам использовать подход fetch, потому что он менее хакерский
@volodymry: Спасибо за ответ. Я добавил изменения, как вы сказали, но теперь в моей кнопке, которая называется Начальный компонент, я получил эту ошибку: «Uncaught ReferenceError: приложение не определено». Кроме того, не могли бы вы объяснить последнюю часть вашего ответа, я не понял. где я должен это добавить?