Can anyone help me? I don't see the json data on the page.
<div class="searchbar-not-found">
<div class="empty-state">
<div class="empty-state-media">
<img src="assets/custom/img/no-search.svg" alt="" />
</div>
<div class="empty-state-title" data-i18n="no-search-results">No Search Results</div>
</div>
</div>
<div class="searchbar-found">
{{#if test}}
<div class="block">
<div class="list list-contacts no-hairlines no-margin no-chevron">
{{#each test.hotels}}
<div class="list-group">
<ul>
{{#each test.hotels}}
<li>
<a href="#" class="item-link" @click="showContact({{this.id}})">
<div class="item-content">
<div class="item-media">
<img class="img-circle" src="{{this.image}}" width="56" alt="" />
</div>
<div class="item-inner">
<div class="item-title">{{this.title}}</div>
<div class="item-info">{{this.info}}</div>
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>{{/if}}
</div>
json data
[
{
"hotel": [
{
"id": "1",
"title": "photo",
"src": "https://source.unsplash.com/9b6yj0m2WVA"
},
{
"id": "2",
"title": "video",
"src": "https://assets.mixkit.co/videos/449/449-720.mp4"
},
{
"id": "3",
"title": "photo",
"src": "https://source.unsplash.com/JN7PFqKAwzU"
}
]
},
{
"items": [
{
"id": "1",
"title": "photo",
"src": "https://source.unsplash.com/9b6yj0m2WVA"
},
{
"id": "2",
"title": "video",
"src": "https://assets.mixkit.co/videos/449/449-720.mp4"
},
{
"id": "3",
"title": "photo",
"src": "https://source.unsplash.com/JN7PFqKAwzU"
}
]
}
]
the script is
return {
data: function() {
return {
hotel: null,
currentContact: null
}
},
methods: {
populateList: function() {
var self = this;
app.request.json(
'assets/custom/dataset/test.json',
function(data) {
var hotel = {};
for (var i = 0, l = data.length; i < l; i++) {
var letter = data[i].title.charAt(0).toUpperCase();
if (!hotel[letter]) {
hotel[letter] = [];
}
hotel[letter].push(data[i]);
}
self.$setState({
hotel: hotel
});
app.listIndex.create({
el: '.list-index',
listEl: self.$el.find('.list-contacts'),
label: true
});
}
);
},
showContact: function(id) {
var self = this;
var currentContact = null;
self.$setState({
currentContact: null
});
for (key in self.speaker) {
if (self.hotel.hasOwnProperty(key)) {
var currentContact = self.hotel[key].filter(function(hotel) {
return hotel.id == id;
});
if (currentContact.length) {
self.$setState({
currentContact: currentContact[0]
});
var popup = app.popup.create({
el: '.popup-contact'
});
popup.open();
break;
}
}
}
}
},
on: {
pageInit: function() {
var self = this;
self.populateList();
}
}
}
shastox
3
app => this.$app
for (key … => for (let key
I cleaned my code, but it don’t work. Is there an error in javascript code?
<div class="page-content">
<div class="searchbar-found">
<div class="block">
<div class="list list-contacts no-hairlines no-margin no-chevron">
{{#each hotel}}
<div class="list-group">
<ul>
{{#each this}}
<li>
<a href="#" class="item-link" >
<div class="item-content">
<div class="item-media">
</div>
<div class="item-inner">
<div class="item-title">{{this.title}}</div>
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>
</div>
script
return {
data: function() {
return {
hotel: null }
},
methods: {
populateList: function() {
var self = this;
app.request.json(
‘assets/custom/dataset/test.json’,
function(data) {
var hotel = {};
for (var i = 0, l = data.length; i < l; i++) {
var letter = data[i].title.charAt(0).toUpperCase();
if (!hotel[letter]) {
hotel[letter] = [];
}
hotel[letter].push(data[i]);
}
self.$setState({
hotel: hotel
});
app.listIndex.create({
el: '.list-index',
listEl: self.$el.find('.list-contacts'),
label: true
});
}
);
},
},
on: {
pageInit: function() {
var self = this;
self.populateList();
}
}
}
why do you iterate through the ‘this’?
I deleted this.title {{title}} but it doesn’t work the same.