I have the following query:
[{
"type": "/tv/tv_series_episode",
"series": "The Simpsons",
"/tv/tv_series_episode/guest_stars": [{
"actor": null
}],
}]
I want to print out a list of guest stars, how do I do such a thing? I tried:
<acre:script>
var query = acre.require("simpsons").query;
var result = acre.freebase.MqlRead(query).result;
</acre:script>
<ul>
<li acre:for="someResult in result">$someResult.actor.name</li>
</ul>
but that's obviously wrong.
I fixed your code: working example.
Your query is nested, but your display code wasn't.
Note how I used console.log(obj) with "View with Console" to examine the query result.
<html>
<head>
<acre:script>
var query = [{
"type": "/tv/tv_series_episode",
"series": "The Simpsons",
"guest_stars": [{
"actor": {
"name":null
}
}],
}];
var result = acre.freebase.mqlread(query).result;
console.log(result);
</acre:script>
</head>
<body>
<ul>
<li acre:for="episode in result">
<div acre:for="star in episode.guest_stars">$star.actor.name</div>
</li>
</ul>
</body>
</html>
Related
I put a component from PrimeVue: TreeSelect in my VueJS code
It works fine, but now how to know which box is selected?
< TreeSelect v-model="selectedNode" :options="options" selectionMode="checkbox" :metaKeySelection="false" placeholder="Select Items"> < /TreeSelect>
I succeed to print that:
{{selectedNode}}
<ul>
<li v-for="check in selectedNode">
{{check}}
</li>
</ul>
The result:
{ "0": { "checked": false, "partialChecked": true }, "0-0": { "checked": true, "partialChecked": false } }
{ "checked": false, "partialChecked": true }
{ "checked": true, "partialChecked": false }
My problem is that I don't know how to just have the keys (0, 0-0...)
The response uses object keys, so you can just use those with Object.keys
If you're doing it in the template, just watch out for the value being null.
<ul>
<li v-for="check in Object.keys(selectedNode || {})">
{{ check }}
</li>
</ul>
Any idea why the onRefresh event is not firing? First time through the table displays properly. But when clicking the refresh button it does not work (event does not fire). I thought this worked before, but I think a new version of bootstrap.min.js may have killed it (or perhaps it is just a coincidence). Any help would be helpful.
HTML:
<table id="stats-view-output4" data-pagination="false" data-show-refresh="true" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-show-header="false" data-show-footer="false">
</table>
Javascript (a button gets u to this function):
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
onRefresh: function (params) {
bpt_pie_chart();
},
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
Well, I gave up and did a brut force solution. Feels like a bug of a conflict somewhere. For anyone stumbling onto this here it is:
HTML:
<div id="toolbar4">
<div class="form-inline" role="form">
<button id="refresh4" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
</div>
<table id="stats-view-output4" data-pagination="false" data-show-refresh="false" data-search="false"
data-cache="false" data-show-toggle="false" data-show-columns="false"
data-toolbar="#toolbar4" data-toolbar-align="right"
data-show-header="true" data-show-footer="false" style="font-size:11px;">
</table>
Javascript:
$(function () {
$('#refresh4').click(function () {
bpt_pie_chart();
});
});
function do_trader_instruments() {
$('#stats-view-output4').bootstrapTable({
columns: [{
field: 'TradedInstruments',
title: 'Traded Instruments'
}],
data: [{
TradedInstruments: "<div id='instrument-chart'></div>"
}]
});
bpt_pie_chart();
}
I am using Vue 2 on Laravel 5.3 (using bxslider for carousel)
The following code gives me a single image (img1) slider.
If I remove v-ifs it does give me 3 image (with img1 img2 img3 in the slider).
Does productChoiceSelected.img2 returns true if it is not null from the database?
EDIT (added full code of the component)
<div class="col-md-4">
<ul class="bxslider">
<li>
<img :src="productChoiceSelected.img1">
</li>
<li v-if="productChoiceSelected.img2">
<img :src="productChoiceSelected.img2">
</li>
<li v-if="productChoiceSelected.img3">
<img :src="productChoiceSelected.img3">
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return{
product:[],
productChoiceSelected:[],
productChoices:[]
}
},
props:[
'productId'
],
mounted(){
this.getProduct()
this.getAllProductChoices()
},
methods:{
getProduct(){
var vm = this;
vm.$http.get('/getProduct/'+vm.productId).then((response)=>{
vm.product = response.data.data.product;
vm.productChoiceSelected = response.data.data.productChoiceDefault;
});
},
getAllProductChoices(){
var vm = this;
vm.$http.get('/getAllProductChoices/'+vm.productId).then((response)=>{
vm.productChoices = response.data.data.productChoices;
});
}
}
}
</script>
EDIT #2
I guess it is because productChoiceSelected.img2 is a url directory? it is http://localhost:8000/img/products/1-2.bmp
I can figure out few issues in your code:
You need to have img1 and these variables defined as these are to be set reactively to be used in vue templated.
You need to move $('.bxslider').bxSlider({}) code in the updated section as this needs to be executed once you get the data updated from backend.
Following are code changes:
var demo = new Vue({
el: '#demo',
data: function(){
return {
productChoiceSelected: {
img1:'',
img2:'',
img3:''
}
};
},
mounted(){
this.getProduct()
},
updated(){
$('.bxslider').bxSlider({});
},
methods:{
getProduct(){
var vm = this;
setTimeout(function () {
vm.productChoiceSelected.img1 = 'http://bxslider.com/images/730_200/hill_trees.jpg'
// vm.productChoiceSelected.img2 = 'http://bxslider.com/images/730_200/houses.jpg'
vm.productChoiceSelected.img3 = 'http://bxslider.com/images/730_200/hill_fence.jpg'
}, 300)
}
}
})
see updated fiddle.
Thanks for saurabh contribution above, as I am still unsure where the problem is, here is how I solve the problem by myself for you guys' reference.
Change in code:
<template>
<div class="col-md-5">
<div class="col-md-12">
<ul class="bxslider">
<li>
<img :src="productChoiceSelected.img1">
</li>
<li v-if="img2">
<img :src="productChoiceSelected.img2">
</li>
<li v-if="img3">
<img :src="productChoiceSelected.img3">
</li>
</ul>
</div>
</div>
.....
.....
.....
methods:{
getProduct(){
var vm = this;
vm.$http.get('/getProduct/'+vm.productId).then((response)=>{
vm.product = response.data.data.product;
vm.productChoiceSelected = response.data.data.productChoiceDefault;
if(vm.productChoiceSelected.img1){
vm.img1 = true
}
if(vm.productChoiceSelected.img2 != null){
vm.img2 = true
}
if(vm.productChoiceSelected.img3 != null){
vm.img3 = true
}
});
},
......
......
......
I'm new to VUE, and having a hard time figuring out how to render an Object where i don't know how many levels deep it will go.
i get this object returned from a web-api
var result = {
"1":{
"id":"1",
"parent_id":"-1",
"name":"Master",
"level":1,
"children":{
"2":{
"id":"2",
"parent_id":"1",
"name":"Category A",
"level":2,
"children":{
"5":{
"id":"5",
"parent_id":"2",
"name":"Category D",
"level":3
},
"6":{
"id":"6",
"parent_id":"2",
"name":"Category E",
"level":3,
"children":{
"10":{
"id":"10",
"parent_id":"6",
"name":"Category F",
"level":4
}
}
}
}
},
"3":{
"id":"3",
"parent_id":"1",
"name":"Category B",
"level":2,
"children":{
"4":{
"id":"4",
"parent_id":"3",
"name":"Category C",
"level":3
}
}
}
}
}
};
I ignore the first level and push it in my store. Now i'm looking for a recursive way to go over all the parent's and theire children.
(this would be an example of the desired output)
<ul>
<li>Master</li>
<ul>
<li>Category A</li>
<ul>
<li>Category D</li>
<li>Category E</li>
<ul>
<li>Category F</li>
</ul>
</ul>
<li>Category B</li>
<ul>
<li>Category C</li>
</ul>
</ul>
</ul>
However i do not get further then:
<ul>
<li>Master</li>
<ul>
<li>Category A</li>
<li>Category B</li>
</ul>
</ul>
And offcourse i could go on like this and then i'll reach the end of my obj. but in real situation i don't know how deep it will go, that's why i want a solution that doesn't care about that and continiu's till there are no more children.
I saw a little something in the doc's but that code is so different from mine that i cant really understand how to apply ( https://v2.vuejs.org/v2/guide/components.html#Circular-References-Between-Components )
My init code is basically this is everything (simplified) together :
store = function() {
var self = this;
self.hierarchies = [];
self.subView = 'hierarchies';
self.tree = [];
};
Vue.component('hierarchies', {
template: '#hierarchies',
props: ['store']
});
Vue.component('products', {
template: '#products',
props: ['store']
});
Vue.component('treeview', {
template: '#treeview',
props: ['store']
});
app = new Vue({
el: '#content',
data: function () {
return {
store: {},
tree: {}
}
},
created: function () {
this.store = new store();
}
});
// DO AXJAX REQUEST GET HIERARCHY'S
var response = // AJAX {};
app.store.tree.push(response[1]);
<template id="treeview">
<div>
<ul v-if="store.tree.length">
<li v-for="m in store.tree">
{{ m.name }}
<ul v-if="m.children">
<li v-for="c in m.children">
{{ c.name }}
</li>
</ul>
<data :tree="m"></data>
</li>
</ul>
</div>
</template>
All idea's suggestions are welcome :)
Best,
Bastian
Your data is in a pretty unpractical format since you cannot loop over object keys using the v-for directive. So in order to consume that format, you have to transform it into an array first. I’m using a computed property for that, but a better solution for the long run might be to transform the data once in the beginning or even changing the result format of your web service (if you can).
var result = {"1":{"id":"1","parent_id":"-1","name":"Master","level":1,"children":{"2":{"id":"2","parent_id":"1","name":"Category A","level":2,"children":{"5":{"id":"5","parent_id":"2","name":"Category D","level":3},"6":{"id":"6","parent_id":"2","name":"Category E","level":3,"children":{"10":{"id":"10","parent_id":"6","name":"Category F","level":4}}}}},"3":{"id":"3","parent_id":"1","name":"Category B","level":2,"children":{"4":{"id":"4","parent_id":"3","name":"Category C","level":3}}}}}};
Vue.component('tree-root', {
props: ['items'],
template: `
<ul>
<tree-item v-for="item in items" v-bind:item="item"></tree-item>
</ul>
`
});
Vue.component('tree-item', {
props: ['item'],
computed: {
children: function () {
return Object.keys(this.item.children).map(k => this.item.children[k]);
}
},
template: `
<li>
{{item.name}}
<tree-root v-if="item.children" v-bind:items="children"></tree-root>
</li>
`
});
var app = new Vue({
el: '#app',
data: {
rootItem: result['1']
}
});
<ul id="app">
<tree-item v-bind:item="rootItem"></tree-item>
</ul>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
What I’m doing here is use two components: tree-root which is responsible for rendering a list of items, and tree-item which is responsible for rendering a single item, eventually recursively rendering another tree-root for the children of each item.
The computed children property is used to transform the children object into a list of children.
Finally, in order to render the root component, we just render the result['1'] which is the root element as a tree-item. We could also render a tree-root instead with the whole result but then we would have to convert it first into an array (just like in the computed property), so I just opted with the simpler solution here.
I want to do a mobile webpage, which in the middle of the webpage, I will be able to swipe my finger to the left/right and scroll between images there.
a photo to demonstrate:
I wanna be able to swipe between the censored images with my finger.
How do I do such a thing?
Thanks in advance!
You're looking for a cover-flow like thing. This might guide you in the proper direction : http://andrebrov.net/dev/carousel/
Source Link : http://forum.jquery.com/topic/jquery-mobile-carousel-widget
GITHUB Link : https://github.com/andrebrov/jqm.carousel
Here's how the HTML would look like :
<div style="height:460px;width:300px;">
<div id="carousel" class="carousel">
<div id="carousel_scrollpane" class="carousel-content">
<div id="carousel_content" class="carousel-content-scroller"></div>
</div>
<div id="carousel_nav" class="carousel-nav">
<div id="carousel_mid" class="carousel-mid"></div>
</div>
</div>
</div>
Then, the initialisation would go this way :
var carousel = new $.widgets.Carousel({
uuid: "carousel",
args: {
"scrollInterval": 600,
"itemWidth": 290
},
value: [{
"title": "Tron.Legacy",
"image": "images/1.jpg"
}, {
"title": "Yogi Bear",
"image": "images/2.jpg"
}, {
"title": "The Chronicles of Narnia: The Voyage of the Dawn Treader",
"image": "images/3.jpg"
}, {
"title": "The Fighter",
"image": "images/4.jpg"
}, {
"title": "Tangled",
"image": "images/5.jpg"
}]
});
Hope this helps!