i have two dimensional array like this:
Array that i get back from Api Call
and i want to loop through via VueJS here is my Code:
<ul>
<li v-for="topCat in allCats" :key="topCat.id">
<li v-for="subCat in topCat" :key="subCat.id">
{{subCat.name}}
</li>
</li>
</ul>
data: function() {
return {
allCats: {},
}
},
mounted() {
axios.get('/api/getAllCats')
.then(response => {
this.allCats = response.data.allCats;
console.log(this.allCats);
})
}
and this is the error code that i can see in the browser console:
"Property or method "topCat" is not defined on the instance but referenced during render."
Does anyone know how i can fix that?
Try out to get access to the sub_cats inside the nested loop :
<ul>
<li v-for="topCat in allCats" :key="topCat.id">
<ul>
<li v-for="subCat in topCat.sub_cats" :key="subCat.id">
{{subCat.name}}
</li>
</ul>
</li>
</ul>
Related
Where can i put ajax get data code in Wagtail? I have following page model:
class ScreencastPage(Page):
content_panels = Page.content_panels + [
InlinePanel(
'groupstage_screencast_relationship', label="Choose Teams",
panels=None, max_num=2),
]
parent_page_types = ['home.HomePage']
def matches(self):
matches = [
n.match for n in self.groupstage_screencast_relationship.all()
]
return matches
And my template:
{% for spiel in page.matches %}
{% if forloop.first == forloop.last %}
<div id="fullscreen">
<ul class="ulup">
<li class="logo_bg first_team">{% image spiel.team_1.team_logo width-400 class="logo" %}<p>{{spiel.team_1.title}}</p></li>
<li class="first_team_score">{{ spiel.team_1_total_score }}</li>
<li class="colons">:</li>
<li class="second_team_score">{{ spiel.team_2_total_score }}</li>
<li class="logo_bg second_team">{% image spiel.team_2.team_logo width-400 class="logo" %}<p>{{spiel.team_2.title}}</p></li>
</ul>
</div>
{% endif %}
{% endfor %}
I started writing js. Just exaple:
$(document).ready(function() {
setInterval(function(){
$.ajax({
type: "GET",
url: {% pageurl page %},
data: {},
success: function(data) {
console.log(data);
$(".first_team_score").contents()[0].textContent = data.team_1_total_score;
$(".second_team_score").contents()[0].textContent = data.team_2_total_score;
}
})
}, 10000);
});
The idea is that the page will automatically update the value of <li class="first_team_score">{{ spiel.team_1_total_score }}</li> and <li class="second_team_score">{{ spiel.team_2_total_score }}</li> without reloading the page.
I found here great example, but they using view.py
We also need to write a new view.py or have wagtail some method for that?
UPDATE
Thanks #Ben-Dickinson from wagtail slack community. He shared a link to the documentation where it is indicated how it's possible to solve such a problem.
I have here another problem. How to convert matches to json?
To catch ajax requests we can use the Page serve() method and use if request.is_ajax():. So I did following inside my ScreencastPage(Page):
def serve(self, request):
if request.is_ajax():
result = [
{
'team_1_name': match.team_1.title,
'team_1_score': match.team_1_total_score,
'team_2_name': match.team_2.title,
'team_2_score': match.team_2_total_score,
}
for match in self.matches()
]
json_output = json.dumps(result)
return HttpResponse(json_output)
else:
return super(ScreencastPage, self).serve(request)
This code from above was the result of help from #gasman, this topic you can find here Converting value to json inside serve method
The final result of the HTML/JS code is:
<div id="match1">
<ul class="ulup">
<li class="logo_bg first_team">{% image spiel.team_1.team_logo width-400 class="logo" %}<p>{{spiel.team_1.title}}</p></li>
<li class="first_team_score">{{ spiel.team_1_total_score }}</li>
<li class="colons">:</li>
<li class="second_team_score">{{ spiel.team_2_total_score }}</li>
<li class="logo_bg second_team">{% image spiel.team_2.team_logo width-400 class="logo" %}<p>{{spiel.team_2.title}}</p></li>
</ul>
</div>
JS:
$(document).ready(function() {
setInterval(function(){
$.ajax({
type: "GET",
url: {% pageurl page %},
dataType: 'json',
success: function(data) {
$("#match1 .first_team").contents()[0].textContent = data[0]["team_1_name"];
$(".first_team_score").contents()[0].textContent = data[0]["team_1_score"];
$("#match1 .second_team").contents()[0].textContent = data[0]["team_2_name"];
$(".second_team_score").contents()[0].textContent = data[0]["team_2_score"];
}
})
}, 10000);
});
data[0] is becoz my data returns database of two matches and i need only first one
I'm working with the new jqwidgets-angular version, released just last month in September.
The gridtree is working great, but having trouble with the tree widget.
FYI: This is based on the angular-tree demo here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm#demos/jqxangular/tree.htm
Here's the jsfiddle I'm working on, but cannot get tree to render here: tree widget
So two things:
1) Can someone help me get this jsfiddle working ?
2) Can someone help me get the jqx-tree to render using ng-repeat
Here's the code from that jsfiddle.
Just a straight ng-repeat inside a div (no tree widget). This is just for testing purposes:
<div ng-app="App" ng-controller="myController">
<div>
<ul>
<li ng-repeat="kriGroup in kriData">{{kriGroup.group}}</li>
</ul>
</div>
</div>
And here's the jqx-tree directive, which is NOT working in jsfiddle example :
<div ng-controller="myController">
<jqx-tree jqx-width="'300px'" jqx-height="'300px'">
<ul>
<li id='home'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>Communities
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Educators and students</li>
<li>Partners</li>
<li>By resource
<ul>
<li>Labs</li>
<li>TV</li>
<li>Forums</li>
<li>Exchange</li>
<li>Blogs</li>
<li>Experience Design</li>
</ul>
</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</jqx-tree>
</div>
and finally the js controller code :
angular.module('App', ['jqwidgets'])
.controller('myController', function ($scope) {
$scope.kriData = [
{
"group": "99_HSVaR",
"kris": [
{
"kri": "1D"
},
{
"kri": "1D CR"
},
{
"kri": "1D EQ"
},
{
"kri": "1D EUR/USD"
}
]
},
{
"group": "Additive",
"kris": [
{
"kri": "MCS"
}
]
},
{
"group": "AsianCrisis",
"kris": [
{
"kri": "Stressed"
}
]
}
];
})
I found the solution, posted in this jsfiddle: http://jsfiddle.net/robertmazzo/s9snLu9m/3/
My ng-repeat was in the wrong scope. And in addition, there were some key attributes missing such as the jqx-data directive.
For example, as shown in the jsfiddle :
<div ng-app="App" ng-controller="myController">
<jqx-tree jqx-data="kriData" jqx-height="300">
<ul>
<li ng-repeat="kriGroup in data">{{kriGroup.group}}</li>
</ul>
</jqx-tree>
</div>
This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?
Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a
square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()
I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
I have this in view "Index":
<ul>
#foreach (var r in Model.Where(c => c.id_parent == null)) {
<li>
#Html.DisplayFor(i => r.node.name)
#if (r.node.children.Count > 0) {
<ul>
#{Html.RenderPartial("aView", r.node);}
</ul>
}
</li>
}
</ul>
But getting this error on the RenderPartial line:
The model item passed into the dictionary is of type 'System.Data.Entity.DynamicProxies.arrangement_86479E2FE1ED6F9584881D169E310F3C37120A10A806A6CF640967CBCB017966',
but this dictionary requires a model item of type
'System.Collections.Generic.IEnumerable`1[PlanovaniZdroju.Models.arrangement]'.
How can I retype the r.node to IEnumerable? OR how else can I solve it?
Are you sure you didn't mean:
<ul>
#{Html.RenderPartial("aView", r.node.children);}
</ul>