I have a JSON that looks like this:
{
list: [
{ name: 'AAA',
id: 1,
age: 34
},
{ name: 'BBB',
id: 2,
age: 24
}
]
}
And a template like this:
<ul>
{{#each list}}
<li onclick="someFunc({{this}})">{{name}} ({{age}}) </li>
{{/each}}
</ul>
Basically I just want to pass the current object , to a function that does something with it.
Now if I try it, then the generated HTML just has
... onclick="someFunc( [object Object] )" ...
whereas I'd like it to be like this:
... onclick="someFunc( {name: 'AAA', id: 1, age: 34} )" ...
How can I fix this?
Posting for future references:
Got my answer from here:
Handlebars.js parse object instead of [Object object]
Turns out Handlebar does a toString on the data before pasting into the template. All I had to do was to register a helper method that converts it back to json.
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
<li onclick="someFunc({{json this}})">{{name}} ({{age}}) </li>
Related
I'm developing a Vue app and I have a list of movies like this:
movies [
{name: 'spider-man', id: 3},
{name: 'thor'},
{name: 'x-men', id: 7}
]
and this is my template
<ul>
<li v-for="movie in movies" :key="movie.name">{{movie.name}}</li>
</ul>
I only wanna show the movies who has an ID, in this case, thor shouldn't be shown. I've tried with v-if but I got this error: "The 'movies' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'".
Thanks, hope you can help me!
Computed properties to the rescue:
data: () => ({
movies: [
{name: 'spider-man', id: 3},
{name: 'thor'},
{name: 'x-men', id: 7}
]
})
...
computed: {
moviesWithId() {
return this.movies.filter(movie => movie.id)
}
}
...
In your template
<ul>
<li v-for="movie in moviesWithId" :key="movie.name">{{movie.name}}</li>
</ul>
Or you may add condition to render to your li tags like v-show="movie.id"
Or filter your dataset like :
<li v-for="movie in movies.filter(movie => movie.id)" :key="movie.name">{{movie.name}}</li>
I got a js object, if I use the console.log, the result is like this:
{ title: 'testCase',
id: '5e41538bbf4a7e93a12925a3e6ca12',
links:
[ URLLink {
link: 'www.google.com' } ]
}
but If I use console.log("sometext" + wireObj);
The result is :
sometext[object Object]
If I use JSON.stringify(), the result will become:
{ title: 'testCase',
id: '5e41538bbf4a7e93a12925a3e6ca12',
links:
[{
link: 'www.google.com' }]
}
As you can see, the URLLink is missing, I would like to preserve this information as well. Any comments?
If what you're trying to do is model links as an array of URLLink objects then maybe you could do it like this:
{ title: 'testCase',
id: '5e41538bbf4a7e93a12925a3e6ca12',
links:
[ {URLLink: {link: 'www.google.com' }},
{URLLink: {link: 'www.yahoo.com' }} ]
}
Note the curly braces wrapping URLLink and the colon mentioned by #alexandru-ionut-mihai
That would be parsed like below:
I am working with knockout js. Now i am using template option and local json data as datasource.In this i am unable to bind the data to node within template.
Please get my html code below:
<div data-bind="template:{name:'treeTemplate',data:{da:Data}}"></div>
<script id="treeTemplate" type="text/html">
<b data-bind="text:$data.text"></b>
Please get my script section below
var treeData = [
{ id: 1, text: "UK"},
{ id: 2, text: "Steven John" },
{ id: 3, text: "USA" },
{ id: 5, text: "Andrew" },
{ id: 4, text: "Angelica" }
];
window.viewModel = {
value: ko.observable(new Date(2015, 06, 15)),
Data: ko.observableArray(treeData)
};
$(function () {
// declaration
ko.applyBindings(viewModel);
});
I have updated the sample in jsfiddle also. Please get the below link:
https://jsfiddle.net/38vnznht/
Can you please anyone suggest on this.Thanks for any help.
your first problem is the use of data in the template object.
data:{da:Data}
for iterating through a array you need to use foreach
foreach:data
so because of this you need to update your bindings
// from this
<b data-bind="text:$data.text"></b>
// to this
<b data-bind="text: text"></b>
here is a working example :
https://jsfiddle.net/wqe3s1vs/3/
Also, documentation on using "foreach" with a named template :
http://knockoutjs.com/documentation/template-binding.html#note-2-using-the-foreach-option-with-a-named-template
I have a list of items. Example of one item:
{"id":7,"name":"ItemName","status":"Active","statusFrom":"2016-01-04T00:00:00","development":"Started","devStartedFrom":"2016-01-04T00:00:00","owner":"Owner"}
I would like the filter to look only in name, status and owner and return either (OR operator) objects. When filter is defined like this:
<tr ng-repeat="item in items | filter: {name:myFilterquery, status:myFilterquery, owner:myFilterquery}">
The filter returns objects by following AND operator.
How would you define a filter to query only by specific fields of an object, but following the OR operator?
You can do your own filtering where you get to chose OR over AND:
[
{id: 123, name: 'abc'},
{id: 456, name: 'xyz'},
{id: 999, name: 'qwe'},
].filter(item => item.id === 123 || item.name === 'xyz') // [{id: 123, name: 'abc'}, {id: 456, name: 'xyz'}]
Update: Ah, you meant in the mark-up!
Answered here?: How to filter multiple values (OR operation) in angularJS
Picked up the angular-filter library and defined the solution this way:
<tr ng-repeat="item in items | filterBy : ['name', 'status', 'owner'] : filterQuery">
Here's a simple example I created to replicate my issue. In my controller, I have an array of people:
$scope.people = [
{ name: 'fred', age: 20 },
{ name: 'bob', age: 22 },
{ name: 'jane', age: 24 },
{ name: 'mary', age: 22 },
{ name: 'ben', age: 24 },
{ name: 'sarah', age: 21 },
];
I have a filter defined:
.filter('grouped', function () {
return function (input) {
return _.groupBy(input, 'age');
}
})
You may notice that I'm using Lo-Dash to do the group by.
In my view I have a list defined:
<div class="list" ng-repeat="personGroup in people | grouped">
{{ $index }}
<div class="list" ng-repeat="person in personGroup">
{{ person.name }}
</div>
</div>
I get the result I'm after but I get a heap of errors in my developer console.
https://docs.angularjs.org/error/$rootScope/infdig?p0=10
I understand why I'm getting the error. This is explained in detail in the above link. I just don't know the proper way of achieving the result I'm after.
As you are creating new Array-objects when grouping the people, I would not use a filter at all. The easiest solution would be to do the grouping inside your controller:
...
$scope.groups = _.groupBy($scope.people, 'age');
...
Your ng-repeat attribute would then read like:
ng-repeat="personGroup in groups"
What version of angular are you using? I'm not getting any error:
http://plnkr.co/edit/bbDGjHWMGZx5GmNcggaw?p=preview