Angucomplete-alt: Remote-API-handler not working as expected - javascript

I'm using angucomplete-alt (https://github.com/ghiden/angucomplete-alt) in an AngularJS project, however I can't seem to make it work.
I'm trying to build a really simple autocomplete form, like this:
<angucomplete-alt pause="400" selected-object="obj" remote-api-handler="search" title-field="id" minlength="1" />
And my function is defined in the controller as such:
$scope.search= function (userInputString, timeoutPromise) {
return $timeout(function () {
return [{ "id": "1" }, { "id": "2" }, { "id": "3" }]
}, 1000);
However, everytime I try to search, I get "No results", even though the console logs no errors and the function is being called fine. What am I doing wrong?

Ok, I've found a solution. Even though it's not specified at all in the docs, the directive expects a response like:
{"data": [Array of objects]}
Therefore, it works if I do it like:
$scope.search= function (userInputString, timeoutPromise) {
return $timeout(function () {
return {"data": [{ "id": "1" }, { "id": "2" }, { "id": "3" }]};
}, 1000);
Hope it will help others.

Related

Resetting form with token field on alpaca.js

I have spent a couple of hours trying to figure out how to properly reset a form with token field on alpaca.js.
Not sure if this is a bug, or I am doing something wrong. I placed two reset buttons, a generic one and a second one that calls a function to reset the form.
<script type="text/javascript">
var value = {};
$("#myform").alpaca({
"schema": {
"title": "token field",
"type": "object",
"properties": {
"text_field": {"type": "text" },
"token_field": { "type": "token"},
}
},
"options": {
"fields": {
"text_field": {
"label": 'this is a text field',
"type": "text"
},
"token_field": {
"label": 'this is a token field',
"type": "token",
"tokenfield": {
},
},
},
"form": {
"buttons": {
"load": {
label:"load saved values",
"click": function() {
$('form#' + this.attributes.id)[0].reset();
this.setValue(value);
},
},
"reset": {},
"fancy_reset": {
"label": "reset with function",
"click": function() {
console.log(this.attributes.id);
$('form#' + this.attributes.id)[0].reset();
},
},
"save": {
label:"save",
"click":function(){
value = this.getValue();
console.log(this.getValue());
console.log(value);
},
},
},
},
},
});
</script>
Any insights on whats wrong here?
I've been working with Alpaca for year but I haven't use that type of and after some research I haven't found any solution in the Alpaca lib to reset that type of field, so I tried to use jquery and bootstrap tokenizer methods.
and I've came to this solution :
Create an eventlistener to the reset form event
$('form').on('reset', function(e) {
var control = $("#myform").alpaca("get");
var field = control.childrenByPropertyId['token_field'];
field.refresh();
});
In your load function after this.setValue(value) add this code:
if (typeof value.token_field != undefined) {
// getting Alpaca parent control (this holds everything)
var control = $("#myform").alpaca("get");
// get the token field
var field = control.childrenByPropertyId['token_field'];
// setting the saved token to the field using bs-tokenizer method setTokens
$(field.control).tokenfield('setTokens', value.token_field);
}
Here's a fiddle for that.
Tell me if you still have any issue.

How to Get data in Json using javascripts?

Hi I'm currently creating an application to gather data form a website, and as I've researched you can used Json for that, now I have created a script to gather data, at first i have no problem with it, but when I cam across with a multi tree json i started having trouble.
here is my Json
{
"orders": [
{
"line_items": [
{
"id": 7660469767,
"name": "Personalised design - purple",
"properties": [
{
"name": "personalised text 1",
"value": "2"
},
{
"name": "personalised text 2",
"value": "Nuri &"
},
{
"name": "personalised text 3",
"value": "Samira"
}
],
}
]
}
]
}
I need to get the order.line_items.properties.value.
I tried this code but it says it does not work.
$.getJSON(order.json, function (data) {
$.each(data.orders.line_items.properties, function (index, value) {
$.each(this.value, function () {
console.log(this.text);
});
});
});
Can someone help me?
$.each(data.orders[0].line_items[0].properties, function (index, value) {
console.log(value.value);
});
Both orders and line_items are array, so it should have an access to array index first before accessing other object. And you don't have to use extra each in your code. The value above is an object for each properties. You can retrieve value there.

Add custom attribute to waterline model

Since nested population isn't available I need to pass my custom attributes manually. In my specific case this means: a customer has many projects, a project has many contributors.
Customer.find().populate('projects').exec(function(err, customer) {
Response looks like
[
{
"projects": [
{ "name": "First project" }
],
"customer": "John Doe"
},
{
"projects": [
{ "name": "Another project" },
{ "name": "And another one" }
],
"customer": "Susan Doe"
}
]
I'm iterating through the projects and want to attach a contributors attribute. I've tried
customer.forEach(function(customer, index) {
customer.projects.forEach(function(project, index) {
ProjectContributor.find({
project: project.id
}).exec(function(err, contributor) {
project.contributors = contributors;
});
But project.contributors is still undefined. Why? And how to attach these custom attributes?
There are many errors in you code.
Customer.find().populate('projects').exec(function(err, customers) {
customers.forEach(function(customer, index) {
customer.projects.forEach(function(project, index) {
ProjectContributor.findOne({project: project.id}) // use findOne since you only want one project at a time
.populate('contributors')
.exec(function(err, projectContributor) {
project.contributors = projectContributor.contributors; // contributors is in projectContributor
});
});
});
});

jsTree custom contextmenu not filtering based on type folder/file

I am trying to configure a custom context menu for jsTree. I want files to have two options [Rename, Delete] and I want folders to have one option [Create]
The below code seems correct as described here: Configuring jstree right-click contextmenu for different node types
However this does not seem to work, there are two problems.
Both context menus display the options [Rename, Delete]
Choosing either option
causes the error: Uncaught TypeError: undefined is not a function
What am I doing wrong?
Edit: here is a fiddle
$( document ).ready(function() {
function customMenu(node) {
// The default set of all items
var items = {
createItem: { // The "create" menu item
label: "Create",
action: function () {
this.create(node);
}
},
renameItem: { // The "rename" menu item
label: "Rename",
action: function () {
this.rename(node);
}
},
deleteItem: { // The "delete" menu item
label: "Delete",
action: function () {
this.remove(node);
}
}
};
if ($(node).hasClass("folder") || $(node).hasClass("jstree-closed") || $(node).hasClass("jstree-open")) {
delete items.deleteItem;
delete items.renameItem;
}
else{
delete items.createItem;
}
return items;
}
$('#tree').jstree({
'core': {
'data': [
{ "id": "ajson1", "parent": "#", "text": "Folder 1" },
{ "id": "ajson2", "parent": "ajson1", "text": "File 1" },
{ "id": "ajson3", "parent": "ajson1", "text": "File 2" }
]
},
"plugins": [ "contextmenu" ],
"contextmenu": {items: customMenu}
});
});
Okay so the answer is that jstree does not implicitly distinguish between files and folders. If you want to make the distinction you need to add an identifier and custom logic.
To accomplish this I added the following to each of my data objects.
"data" : { "file" : true }
The custom logic then became
if (node.data.file) {
delete items.createItem;
}
else{
delete items.deleteItem;
delete items.renameItem;
}
Furthermore, the manner in which I was implementing custom actions was wrong. I figured this out by looking at the source of jstree (jstree/src/jstree.contextmenu.js). To enable create and delete you must set 'check_callback': true. Then you can for example implement the create action as follows.
createItem: { // The "create" menu item
label: "Create",
action: function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
new_node.data = {file: true};
setTimeout(function () { inst.edit(new_node); },0);
});
}
},
Full working jsfiddle here.

How to filter a JSON tree according to an attribute inside

I have to re-post this questions with more details again:
I got a JSON tree array.
The structure of JSON tree looks like this:
{
"app": {
"categories": {
"cat_222": {
"id": "555",
"deals": [{
"id": "73",
"retailer": "JeansWest"
}, {
"id": "8630",
"retailer": "Adidas"
}, {
"id": "11912",
"retailer": "Adidas"
}]
},
"cat_342": {
"id": "232",
"deals": [{
"id": "5698",
"retailer": "KFC"
}, {
"id": "5701",
"retailer": "KFC"
}, {
"id": "5699",
"retailer": "MC"
}]
}
}
}
}
now, I'd like to filter this JSON tree with var pattern="KF",
return all with retailer name contains KF with it's id.
======================update===========================
Just check my other question. It got solved.
filter multi-dimension JSON arrays
Use Array.filter or _.filter if you need to support IE < 9
Well, you can use _.filter:
var filteredArray = _.filter(arrayOfStrings, function(str) {
return str.indexOf(data) !== -1; });
... or jQuery.grep:
var filteredArray = $.grep(arrayOfStrings, function(str) {
return str.indexOf(data) !== -1; });
As you see, the approaches are quite similar - and, in fact, both use Array.filter, if it's available in the host environment.
Also note that the original array is not affected here. If you want otherwise, just assign the result of filtering to the same variable (i.e., arrayOfStrings in this example).

Categories

Resources