Перебор объекта 2 массивов Handlebars + node.js

266

06 сентября 2018, 06:50

Не могу решить задачу у меня есть JSON объект c 2 свойствами которые имею массивы.

"gallery": [{
       "images": ["firstImg.jpg", "secondImg.jpg", "threeImg"],
       "description": ["someFirstTxt", "SecondTxt", "ThreeTxt"]
}]

По структуре создано промежуточное ПО к которому я обращаюсь к JSON документу

const placesJSON = require("./lib/places.json");
    app.use(function(req, res, next) {
    const places = placesJSON;
    if(!res.locals.placesArray) res.locals.placesArray = {};
    res.locals.placesArray = places;
    next();
});

И на html странице идет участок на котором рендерятся и перебераються эти 2 массива

{{#each placesArray.gallery}}
    <img src="somePath/{{images}}">
    <p>{{description}}</p>
 {{/each}}

Но в чём проблема, как можно сделать правильно чтобы была по очередность, так чтобы сперва шел

<div>
     <img src="path/firstPhoto" alt="">
     <p>Lorem ipsum dolor sit amet</p>
     <img src="path/secondPhoto" alt="">
     <p>Lorem ipsum dolor sit amet: часть 2</p>
     <img src="path/thirdPhoto" alt="">
     <p>Lorem ipsum dolor sit amet: часть 3</p>
     И так далее....
</div>

А то вообще не как не могу решить эту задачку, пытался перебрать эти 2 массива и используя resultArray.push(arr[i], arr1[i]) к примеру, но не могу потом использовать отдельно свойства для фото{{images}} и для параграфа{{description}}, а полная путаница происходит ибо фотом будет и 10 а текста около 4 параграфов и на оборот.

Answer 1

Не могу решить задачу у меня есть JSON объект c 2 свойствами которые имею массивы.

Ваш JSON

{"gallery": [{
       "images": ["firstImg.jpg", "secondImg.jpg", "threeImg"],
       "description": ["someFirstTxt", "SecondTxt", "ThreeTxt"]
}]}

Вот так получается:

{{#each gallery}}
{{#each images }}
    <img src="somePath/{{this}}">
    <p>{{lookup ../description @index}}</p>
  {{/each}}
 {{/each}}

{{lookup <ref_array> @index }} - динамическое обращение к прараметрам.

Объектов в галреи может быть много, конечно такой вид JSON более логичен, у каждой картины свое описание и т.д.

{
    "gallery": [{
        "objects": [{
                "image": "firstImg.jpg",
                "description": "someFirstTxt"
            },
            {
                "image": "secondImg.jpg",
                "description": "SecondTxt"
            },
            {
                "image": "threeImg",
                "description": "ThreeTxt"
            }
        ]
    }]
}

И тогда:

{{#gallery}}
{{#each objects}}
    <img src="somePath/{{image}}">
    <p>{{description}}</p>
 {{/each}}
{{/gallery}}

Браузерный пример:

// Сам темплейт 
var template = document.querySelector('#handlebars-demo').innerHTML; 
 
 
var templateScript = Handlebars.compile(template); 
//---------------------------------------------------------------- 
// JSON 
var context = { 
  "gallery": [{ 
    "objects": [{ 
        "image": "//picsum.photos/200/300", 
        "description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." 
      }, 
      { 
        "image": "//picsum.photos/200/301", 
        "description": "Vestibulum tortor quam,feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper." 
      }, 
      { 
        "image": "//picsum.photos/200/302", 
        "description": "Aenean ultricies mi vitae est. Mauris placerat eleifend leo." 
      } 
    ] 
  }] 
}; 
//---------------------------------------------------------------- 
 
var html = templateScript(context); 
// Добавление в body 
document.body.innerHTML = html;

img { 
  border: 2px solid gray; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.runtime.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> 
 
<!-------- Пример --------> 
<script id="handlebars-demo" type="text/x-handlebars-template"> 
  {{#gallery}} {{#each objects}} 
 
  <img src="{{image}}" /> 
  <p>{{description}}</p> 
 
  {{/each}} {{/gallery}} 
</script> 
<div class="app"></div>

Проверить можно без браузера ТУТ