i use Twitter Bootstrap and typeahead.
i download the plugin: Twitter Bootstrap Typeahead Plugin Extension
and so long so good, its working when i use a static javascript json array eg.
$('#demo1').typeahead({
source: [
{ id: 9000, name: 'Aalborg' },
{ id: 2, name: 'Montreal' },
{ id: 3, name: 'New York' },
{ id: 4, name: 'Buffalo' },
{ id: 5, name: 'Boston' },
{ id: 6, name: 'Columbus' },
{ id: 7, name: 'Dallas' },
{ id: 8, name: 'Vancouver' },
{ id: 9, name: 'Seattle' },
{ id: 10, name: 'Los Angeles' }
],
itemSelected: displayResult
});
When i try to use ajax its will do enerything, my code look like this.
$('.typeahead').typeahead({
ajax: '/actions/search/synonymSearch',
itemSelected: displayResult
});
and its return this json array ( i can rebuild its on all ways, and i can't get it to work )
[
{ id: 1, name: 'Toronto' },
{ id: 2, name: 'Montreal' },
{ id: 3, name: 'New York' },
{ id: 4, name: 'Buffalo' },
{ id: 5, name: 'Boston' },
{ id: 6, name: 'Columbus' },
{ id: 7, name: 'Dallas' },
{ id: 8, name: 'Vancouver' },
{ id: 9, name: 'Seattle' },
{ id: 10, name: 'Los Angeles' }
]
The plugin home pages.
https://github.com/tcrosen/twitter-bootstrap-typeahead
i hobe enybardy can help me here :)
thanks a lot for all helping, :)
EDIT - Problem resovle! :)
Just need to added header("content-type: application/json");
into my PHP file, hobe this answere are usefull for orther peopole! :)
I don't think typeahead can read the source of your array and therefore I would parse it first.
var data = [{"id":"9000","name":"Aalborg"},{"id":"9220","name":null},{"id":"9210","name":null},{"id":"9200","name":"Aalborg SV"}];
// using underscore.js get an array of the city names
var cities = _.pluck(data, "name");
// now start typeahead
$el.typeahead(
source: cities,
// the value of the `city` selected gets passed to the onselect
onselect: function(city) {
// get the index of city selected from the data array
var i = _.indexOf(data, city);
// then using the index get what ever other value you need from the array
// and insert in the DOM etc..
}
);
This problem you are experiencing may be due to the page that you are calling via ajax isn't returning the right headers.
If you are using PHP try adding header('Content-type: application/json'); to the document that contains the JSON array.
Related
So I am making a filter functionality for React, so I have an array of objects, and based on another array that contains values to filter the array, I need to get the filtered values.
code: the array of objects to apply the filter to:
const citiesData = [
{
id: 1,
name: 'amritsar',
popu: '1200'
},
{
id: 2,
name: 'jalandhar',
popu: '1300'
},
{
id: 3,
name: 'phagwara',
popu: '1200'
},
{
id: 4,
name: 'ludhiana',
popu: '1400'
},
{
id: 5,
name: 'mumbai',
popu: '2000'
},
{
id: 6,
name: 'banglore',
popu: '2000'
},
{
id: 7,
name: 'ohter city 1',
popu: '1500'
},
{
id: 8,
name: 'ohter city 2',
popu: '1500'
},
{
id: 9,
name: 'anohter city 1',
popu: '2200'
},
{
id: 10,
name: 'anohter city 2',
popu: '2200'
},
]
code: filters array based on what I need to apply the conditions:
const filterCity = [
{
filterType: 'name',
filterValue: 'amritsar'
},
{
filterType: 'popu',
filterValue: '1200'
}
]
solutions I've tried:-
code: solution 1:
const filteredList = citiesData.filter(item => {
return filterCity.filter(fItem => item[fItem.filterType] === fItem.filterValue).length
})
code: solution 2:
const filteredList = citiesData.filter(item => {
return filterCity.reduce((acc, val) => {
if(item[val.filterType] === val.filterValue) {
acc = true
}
return acc;
}, false)
})
code: result I'm getting:
[
{ id: 1, name: 'amritsar', popu: '1200' },
{ id: 3, name: 'phagwara', popu: '1200' }
]
it's giving me two objects because according to the filters array I'm searching for the name and popu fields. but the expected result should be:
[ { id: 1, name: 'amritsar', popu: '1200' } ]
because the name and popu is similar in that but in the second object the name is not the same.
I want the code to check all the conditions and then give me the result. right now it's working on the individual filter and individual array item.
so can anyone help me on this!!
so, it should be an AND filter (combining all conditions)?
res = citiesData.filter(d =>
filterCity.every(f => d[f.filterType] === f.filterValue))
for the OR filter (any condition), replace every with some.
I have a function:
const sort =
(pets,attribute) =>
_(pets)
.filter(pets=> _.get(pets, attribute) !== null)
.groupBy(attribute)
.value()
Some data:
const pets= [{
id: 1,
name: 'snowy',
},
{
id: 2,
name: 'quacky',
},
{
id: 3,
name: 'snowy',
age: 5,
},
{
id: null,
name: null,
age: null
}
]
const attribute = 'name'
I am currently trying to write some Jest unit tests for this, that tests if the function returns the correct resultant object after being sorted based off an attribute.
The result of:
sort(pets,attribute) is something like this:
{
snowy: [ { id: 1, name: 'snowy' }, { id: 3, name: 'snowy', age: 5} ],
quacky: [ { id: 2, name: 'quacky' } ]
}
Is there a way I can do a expect to match the two objects snowy and quacky here?
The thing I want to test for is that the objects are being correctly grouped by the key.
I've tried using something like
const res = sort(users,key)
expect(res).toEqual(
expect.arrayContaining([
expect.objectContaining({'snowy' : [ { id: 1, name: 'snowy' }, { id: 3, name: 'snowy', age: 5 } ]},
expect.objectContaining({'quacky' : [ { id: 2, name: 'quacky' } ]}))
])
)
which doesn't seem to work, the received output seems to output:
Expected: ArrayContaining [ObjectContaining {"snowy": [{"id": 1, "name": "snowy"}, {"age": 5, "id": 3, "name": "snowy"}]}]
Received: [Function anonymous]
I am unsure what the best method to test this kind of function is either so advice on that would be appreciated.
If this is what your arrangeBy() returns:
{
snowy: [ { id: 1, name: 'snowy' }, { id: 3, name: 'snowy', age: 5} ],
quacky: [ { id: 2, name: 'quacky' } ]
}
Then you can just do:
const expected = {
snowy: [ { id: 1, name: 'snowy' }, { id: 3, name: 'snowy', age: 5} ],
quacky: [ { id: 2, name: 'quacky' } ]
}
const res = arrangeBy(users,key)
expect(res).toEqual(expected)
But looking at your Error message I guess you have something else mixed up. In the beginning you listed the implementation of a sort function which seems to not be used in the test. Where is arrangeBy coming from now.
Please provide more code examples.
I am trying to implement a grid with grouping feature. This is my Model:
Model
Ext.define('myApp.model.ModelPrueba2', {
extend: 'Ext.data.Model',
fields: ['id', {
name: 'name',
type: 'string'
},'sign']
});
I fill my store from an AJAX proxy request. This is my JSON:
{
success: true,
data: [{
id: 1,
name: 'Name 1',
sign: {
id: 1,
name: 'F1'
}
}, {
id: 2,
name: 'Name 2',
sign: {
id: 2,
name: 'F2'
}
}]
}
You can appreciate that my 'sign' field is an 'object'. My problem is: when I group by 'name', it works fine, and if I collapse some group, it only collapses the group that I selected. However, if I group by 'sign', the groups are well-formed and displayed, but when I collapse a specific group, all the groups get collapsed, and the only difference with the previous test is the field type, 'name' is string and 'sign' is an object... So I don't really know if this a bug. I am using 4.2 version.
This is a fiddle where you can test my problem: https://fiddle.sencha.com/#fiddle/vt
Here you can group by 'probabilities to win', and collapse one group, it works fine, but if you delete every
toString: function() {
return this.value;
}
from the 'data' array and do the same, you will see how all groups get collapsed in one. What can I do to fix this?, I don't like to use this toString() in my store or JSON.
How can I group by an Object attribute?
you MAY have some luck with a "hasOne" relationship in your model instead of the "auto' type. (I'm not sure if it's possible to group using a relationship)
Or you could create another field just for the grouping (type string or int) like this :
{
success: true,
data: [{
id: 1,
name: 'Name 1',
myGroupField : 1,
sign: {
id: 1,
name: 'F1'
}
}, {
id: 2,
name: 'Name 2',
myGroupField : 2,
sign: {
id: 2,
name: 'F2'
}
}]
}
A similar solution is to bring up the field from your nested object to the parent object :
{
success: true,
data: [{
id: 1,
name: 'Name 1',
signId: 1,
signName: 'F1'
}, {
id: 2,
name: 'Name 2',
signId: 2,
signName: 'F2'
}]
}
and then group by signId
The idea is that the user selects a date from a calendar, available time slots are displayed, and upon selecting an available timeslot, the time slot will be blocked to cancel duplicate timeslot selection, and added to the database.
I am using MVC.NET, WebAPI, EntityFramework and angularJS.
my time slots are an array:
$("input").click(function () {
$('.datepicker').pickadate()
$scope.hours = {};
$scope.hours = [
{
id: 1,
name: '12:00'
},
{
id: 2,
name: '13:00'
},
{
id: 3,
name: '14:00'
},
{
id: 4,
name: '15:00'
},
{
id: 5,
name: '16:00'
},
{
id: 6,
name: '17:00'
},
{
id: 7,
name: '18:00'
},
{
id: 8,
name: '19:00'
},
{
id: 9,
name: '20:00'
},
{
id: 10,
name: '21:00'
},
{
id: 11,
name: '22:00'
}
];});
view is simply retrieve the array with ng-options="hour.name as hour.name for hour in hours".
my questions are:
how can i block user selected timeslots using only angular?
is it possible to keep the code skinny on the backend, or is it better to sort such things on the server?
what way is the most efficient?
Cheers.
By using select2.js v4 plugin , how set the default selected value when I use a local array data for source?
for example with this code
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
}];
$('select').select2({
data: data_names,
});
How set id 3 as the default selected value?
$('.select').select2({
data: data_names,
}).select2("val",3);
this worked for me with V4.0.3
$('.select').select2({
data: data_names,
})
$('select').val(3);
$('select').trigger('change.select2');
It is better you send another attribute (selected in my case below) for select and use it to set the default value. I did something like below -
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
selected: true
}];
then do
$(".select").select2({
data : data_names
});
data_names.forEach(function(name){
if(name.selected) {
$(".select").select2('val',name.id);
}
});
It's worked for me.
$('#select').select2({data: data_names}).val(3).trigger('change')