We Keep Coding

Datatable search in nested table

I'm using metronic v5.0.7.1 i have a datatable which is contains nested array so i just want to search in this array.
I'm able to bind my case status like that;
{
field: 'case.case_status',
title: "Status",
}
there is my search field;
var query = datatable.getDataSourceQuery();
$('#m_form_durum').on('change', function () {
datatable.search($(this).val(), 'case.case_status');
}).val(typeof query.case.case_status !== 'undefined' ? query.case.case_status : '');
After that im getting this error "Cannot read property 'case_status' of undefined". How can I specify the nested field in this case?
By the way if I replace my field to 'count' which is in my array instead of 'case.case_status' its work very well. Just nested fields give this error.
Also this is my sample data:
[
{
"id": 93,
"case": {
"id": 99,
"case_status": 1,
},
"user": "1",
"count": "2",
"created_at": "2018-02-08T09:00:00.884590+03:00",
"modified_at": "2018-02-08T09:00:00.884612+03:00",
"is_deleted": false,
}
]

Angularjs Load "$ scope" in a table based on a select

I try to view the "$ scope" in the table to be displayed according to the select chosen. Keeping the default selection in the select.
The $scope that are in the json just a server. example : " status " : $ scope.DC01_GF1_STATUS "
Here is modeled : https://plnkr.co/edit/CaWNeIDHe2nFyEgDABvg?p=preview
$scope.templates = {"webapp": {
"Dc01": [
{
"name": "Groupe Froid 1A",
"value": "gf1a",
"data": {
"status": $scope.DC01_GF1_STATUS,
"capacite": $scope.DC01_GF1_CAP_T
},
},
{
"name": "Groupe Froid 3A",
"value": "gf3a",
"data": {
"status": $scope.DC01_GF3_STATUS,
"capacite": $scope.DC01_GF3_CAP_T
},
}]
}
};
Thank you

You are missing some data. You'll need to import it.
Here's an example: https://plnkr.co/edit/NPfRM0
relevant code:
// loading dummy status codes:
$scope.DC01_GF1_STATUS = 'status GF1'
$scope.DC02_GF1_STATUS = 'status GF2'
$scope.DC01_GF1_CAP_T = 10
$scope.DC02_GF1_CAP_T = 5
...
$scope.testBat = function(arg) {
...
$scope.capacite = $scope.templates.webapp[arg][0].data.capacite;
$scope.status = $scope.templates.webapp[arg][0].data.status;
...
}
index.html change
<p class="gfInterface">{{capacite}} %</p>

the problem comes from the declaration of the "$scope". The problem comes when I select a title in the "select" for example "Groupe Froid 3A" values "$scope" name, capacite and status does not change. Because the $scope of such name is $scope.name = $scope.templates.webapp[building][0].name; but for the selection "Groupe Froid 3A" the $scope should be $scope.name = $scope.templates.webapp[building][1].name;. And it is like for the rest. I would have come to retrieve the id or the value of intitullé selected to generate the $scope.name example. As for building variable $scope.templates.webapp[building][number].name. The variable retrieves the id of the selection.

How to write array which collects ng-click event in AngularJs?

I am working with a project, where I need to collect multiple items from user and send it to the server. There is list on my view, where user can click and select the items. My HTML looks like this,
HTML
<div ng-repeat="topicList in searchCtrl.topic">
<div ng-repeat="topicTerm in topicList">
<p>{{topicTerm.number}}&nbsp&nbsp{{topicTerm.name}}</p>
<div ng-repeat="subTopic in topicTerm.subTopics">
{{subTopic.number}}&nbsp&nbsp{{subTopic.name}}
</div>
</div>
</div>
I have used anchor tag, there user can click and at the same time I want the clicked items (which have also unique ID) collected in an Array or variable, which I need to send (these selected items) to the server via form submission.
This is how my controller looks like,
JavaScript Controller
angular.module('myApp').controller("searchController", function($log, searchService, $scope){
var self = this;
self.initializeSearch = function(){
self.searchEntry =
{
"contact":{
"person": "",
"organization": ""
},
"request": {
"input": "",
"language": "en"
},
"topicIds": []
};
// The POST request must looks like above
What I want is that the clicked subTopics IDs collects in an Array "topicIds : []" and I could successfully send the POST request mentioned above. The searchService is a Angular service which helps to get Topics from server and also to POST user input to the server.
This is how my JSON looks like,
JSON API
{
"TopicList" :[
{
"id": "798790fa-78c8-4f00-8179-9e70f40adb14",
"name": "Topic1",
"number": 1.0,
"subTopics": [
{
"id": "82c90f2e-deac-4fa4-80f4-d077edacc2dc",
"name": "data1.1",
"number": 1.1
},
{
"id": "0f0c2b89-6dae-4f60-90f8-df49d96b9af9",
"name": "data1.2",
"number": 1.2
},
{
"id": "131b68b6-1f45-477f-9b0f-8ac80c5b4f4e",
"name": "data1.3",
"number": 1.3
},
{
"id": "16c8f46d-d20c-48f9-a0c0-e3989763082b",
"name": "data1.4",
"number": 1.4
}
]
},
{
"id": "9ed3fee0-5347-4f00-9b56-721b61439f88",
"name": "Topic2",
"number": 2.0,
"subTopics": [
{
"id": "eec13511-1408-4f4b-be6f-8b5a8b6ea28b",
"name": "data2.1",
"number": 2.1
},
...
]
},
...
]
}
How to write a function or array which collects the IDs via ng-click event?
Thanks in Advance.

No need to use an $event, simple pass the subTopic.id, or whatever, in your ng-click, like ng-click="searchCtrl.select(subTopic)"
And then in your controller, you could have:
angular.module('myApp').controller("searchController", function($log, searchService, $scope){
var self = this;
var subTopicIds = []; // array to hold subTopicIds
self.select = function(subTopic) {
subTopicIds.push(subTopic.id);
}
self.initializeSearch = function(){
self.searchEntry =
{
"contact":{
"person": "",
"organization": ""
},
"request": {
"input": "",
"language": "en"
},
"topicIds": subTopicIds // use the object created previously
};
...

You can get an ID in angular like this.
<div ng-click="recordClick($event)">Click</div>
That will feed the click event into the recordClick method, where you can then call it's target property (i.e. the div it was invoked on) and push it in the array.
$scope.clickArray = [];
$scope.recordClick = function(event){
clickArray.push(event.target);
}

I solved this problem by passing subTopics ID in ng-click as a parameter. And as per the requirement I need to call also another event while user click, which I passed as a second argument. So, now both the events works as I wanted via single ng-click.
Here is my updated code,
HTML
<div ng-repeat="topicList in searchCtrl.topic">
<div ng-repeat="topicTerm in topicList">
<p>{{topicTerm.number}}&nbsp&nbsp{{topicTerm.name}}</p>
<div ng-repeat="subTopic in topicTerm.subTopics">
{{subTopic.number}}&nbsp&nbsp{{subTopic.name}}
</div>
</div>
</div>
And here is my controller,
Controller
angular.module('myApp').controller("searchController", function($log, searchService, $scope){
var self = this;
var subTopicIDs = [];
self.select = function(TopicIDs, event){
subTopicIDs.push(TopicIDs);
$(event.target).addClass('selor'); // This is class which changes the background color of the clicked item
console.log(TopicIDs);
}
self.initializeSearch = function(){
self.searchEntry =
{
"contact":{
"person": "",
"organization": ""
},
"request": {
"input": "",
"language": "en"
},
"topicIds": subTopicIDs
};
This is how it solved my problem.
Btw, Thank you Tom and OceansOnPluto.

How get extra information from json?

I use can.Component to dispay JSON on the page.
can.Component.extend({
tag: "some-app",
scope: {
items: new Items.List({}),
displayedItems: function () {
...
return items;
}
},
helpers: {
...
},
events: {
"{Items} created": function (Items, ev, newItem) {
...
}
}
})
How can I get "meta" section of received JSON (below) to the scope or helpers?
{
"data": [
{
"description": "Some text",
"id": 1,
"measurement": "pcs",
"name": "Name of item",
"resource_uri": "/api/v1/item/1/"
},
{....}, {....}
}
],
"meta": {
"limit": 20,
"next": null,
"offset": 0,
"previous": null,
"total_count": 3
}
}
I can get it in console with Items.findAll().then(function(info){console.log(info.attr('meta'))}) , but I'm noob in (can.)js and can't understand how to get it in the place I need.

Instead of this:
scope: {
items: new Items.List({})
}
make the request:
scope: {
items: Items.findAll()
}
There are other ways to do this as well, in the template(not advised), or creating the request in another controller or component and passing in to the instantiation of the component.
If you want more specifics, you would nee to update your question with more details on your model.

Only want to pull JSON Class not all data

Trying to only pull text from a class with a unique name using $.getJSON and YQL. Right now it pulls all data and strips out tags. Anyone know if this can be achieved?
function filterData(data){
// filter all the nasties out
// no body tags
data = data.replace(/<?\/body[^>]*>/g,'');
// no linebreaks
data = data.replace(/[\r|\n]+/g,'');
// no comments
data = data.replace(/<--[\S\s]*?-->/g,'');
// no noscript blocks
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
// no script blocks
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
// no self closing scripts
data = data.replace(/<script.*\/>/,'');
// the below doesn't work of course, but if I could use jQuery I would do as follows:
data = $(data).find('.count').text();
return data;
}
Here is part of the JSON it pulls:
"div": [
{
"id": "store-page-rating",
"div": [
{
"id": "store-six-month-rating",
"div": {
"style": "float:left;",
"span": {
"class": "rating",
"img": {
"alt": "Rating 8.68/10",
"class": "stars fourhalf",
"src": "http://images4.resellerratings.com/CDN-1328669559/static/images/blankstar.gif",
"style": "width: 80px; height: 16px;",
"title": "Rating 8.68/10"
},
"span": [
{
"class": "count",
"content": "27"
},
How can I just display the "27" on class "count" instead of ALL the data on the domain?

I don't think you have much of a choice here, yql provides you a proxy to query the resources that are not on your domain. you can make your own server side proxy that can filter the results and return you the desired output in json format.

What I had to do and was unaware of was to use XPATH at the end of the YQL statement.
select content from html where url="http://www.resellerratings.com/store/Burkett_Restaurant_Equipment_Supplies"
and xpath="//span[#class='count']"
See here