Jquery TokenInput Initial Strings Search - javascript

Im using jquery Tokeninput library for autocomplete functionality. Im currently struggling with the issue I have with the search results. When I type something, it returns all the words for characters which are being typed. I want it to only return the search results where initial strings match.
For example, if I type "Na", it returns all the words which have "Na" such as "Canada", "Financial" etc.
I would ONLY like for it to return words which start with "Na" such as "Nation", "Nascar" etc.
Im new to JavaScript to facing trouble updating this script. Can someone please help ?
Here is the library that Im using - https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js
$("#demo-input").tokenInput([
{id: 7, name: "Canada"},
{id: 11, name: "Financial "},
{id: 13, name: "Nation"},
{id: 17, name: "Nascar"},
{id: 19, name: "USA"},
{id: 31, name: "Economics"}
]);

I checked library code and I don't think you can pass any option to change default search type which checks for existence of search query within a value. However, I found a heck which you could use (IMO you shouldn't unless necessary).
Working example here
Library allows you to process search results by using onResult and onCachedResult callbacks you could use that for your leverage.
$("#demo-input").tokenInput([
{id: 7, name: "Canada"},
{id: 11, name: "Financial "},
{id: 13, name: "Nation"},
{id: 17, name: "Nascar"},
{id: 19, name: "USA"},
{id: 31, name: "Economics"}
],
{
onResult: filterSearchResults,
onCachedResult: filterSearchResults
});
function filterSearchResults(items){
var query = $("#demo-input").parent().find("ul li input").val().toLowerCase();
return items.filter(i => i.name.toLowerCase().startsWith(query));
}

Related

Convert array to an array object with some modifications

i'm pretty beginner in the JavaScript and I really need help to convert an array to an array object. There are many examples here in stackOverflow, but I need some modidfication during this process, which is why I couldn't do anything
For example I have:
data = [{id: 21, name: "jack"} , {id: 185, name: "yas"}]
and I need to convert it with something like that (id key change to student_id, and present = true, should be added), and the length of this array is dynamic and will change over time.
[
{
"student_id" : 21,
"present" = true
},
{
"student_id" : 185,
"present" = true
}
]
I need to add these array object to:
const data: any = {
here....
};
your help will be much appreciated.
Assuming your data actually looks more like this
data = [{id: 21, name: "jack"}, {id: 185, name: "yas"}]
This is a simple matter of mapping the array to a new format with the properties you want
const data = [{id: 21, name: "jack"}, {id: 185, name: "yas"}]
const newData = data.map(({ id }) => ({
student_id: id,
present: true
}))
console.log(newData)

Find element that doesn't have a specific key property in JS objects array

i have an array :
[
0 {
Id : 01
country : "Algery"
name: "Amnesty"
},
1 {
Id : 02
country : "USA"
name: "Alarmy"
},
2 {
Id : 03
country : "Alaska"
}
]
And i want to find in this list the object that has not the property "Name".
I tried by doing myArray.find((pers) => !(pers.name));
But it doesn't work.. anyone have an idea here?
You can do:
const arr = [{ Id: 01, country: "Algery", name: "Amnesty" }, { Id:02, country: "USA", name: "Alarmy" }, { Id: 03, country:"Alaska" }];
console.log(arr.find(obj => !('name' in obj)));
The code is working fine only for falsy name. To check if a property exists, you could take the in operator.
const
array = [{ Id: 01, country: "Algery", name: "Amnesty" }, { Id: 02, country: "USA", name: "Alarmy" }, { Id: 03, country: "Alaska" }];
console.log(array.find(person => !('name' in person)));
This approach returns only the first found item. For getting all items, you could apply Array#filter for getting an array.
Beside above mention ways, one more way to achieve this is by using hasOwnProperty method
For your reference :
for ( var key in jsonArray) {
if (!jsonArray[key].hasOwnProperty("name")) {
console.log(jsonArray[key]);
}
}

JS - conditional property selection

I have two arrays with the following structure:
First dictionary:
[{id: 111, abbr: "FBI", name: "Federal Burreau of Investigation"},
{id: 59, abbr: "CIA", name: "Central Intelligence Agency"},
{id: 130, abbr: "EU", name: "European Union"}]
Second dictionary:
[{id: 28, name: "Administration"},
{id: 107, name: "Advocacy"},
{id: 100, name: "Agriculture"},
{id: 77, name: "Air & Aviation"}]
I am trying to create a delimiter function that accesses these objects in the following way:
finalDictionary.push({ delimiter: dictionary[0].abbr.charAt(0) });
and correspondingly:
finalDictionary.push({ delimiter: dictionary[i].name.charAt(0) });
My aim is to make the method universal and diminish the amount of final code. As you see, the only difference here is the property by which I am accessing the dictionary, 'abbr' and 'name'. I tried to do it the following way:
var ext = (name === 'agencies') ? 'abbr' : 'name';
finalDictionary.push({ delimiter: dictionary[i].ext.charAt(0) });
However, I get an error:
TypeError: Cannot read property 'charAt' of undefined
The question is how can I conditionally access the object property? Maybe, there is a better approach than this one? If not, what am I doing wrong?
The problem is in this line:
dictionary[i].ext.charAt(0)
dictionary[i].ext assume that you have a property ext inside dictionary[i] which you don't and therefore it returns undefined.
than what happens is undefined.charAt(0) which raises your error
Change it to:
dictionary[i][ext].charAt(0)
Than the property here is the value of ext which is 'abbr' or 'name'
There is no property named ext in the example json you have shown, that is why you are facing this error.

Populating a react-table with an object instead of a list

The documentation for the react-table library (https://github.com/react-tools/react-table#data) states:
"Simply pass the data prop anything that resembles an array or object."
However, the tables are rendered as expected when passing in an array of data, but when passing an object, I get the error:
"Invalid prop data of type object supplied to ReactTable, expected array."
An example data object looks like this:
const data = {
"entry1": {
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
}, "entry2": {
name: 'aTanner Linsley',
age: 26,
friend: {
name: 'aJason Maurer',
age: 23,
}
} };
Is this a problem with the structure of my object, or does it simply mean the library does not support the population via objects in this way?
Note: I prefer to maintain this data structure (which will become huge) as an object (dictionary) instead of an array so I can efficiently access elements by key for another use (outside of react-table).
The react-table library would expect an input like that:
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
name: 'aTanner Linsley',
age: 26,
friend: {
name: 'aJason Maurer',
age: 23,
}
}];
I prefer to maintain this data structure
Is there any particular reason to that? However, if you really want to do it like that, you could apply the Object.values(...) (MDN Source) method to your data before passing it to the component. In that case you can manage it as you desire and the component will get the right data structure.
const convertedObject = Object.values(data);
But keep in mind that in this case, you will lose your keys entry1 and so on.

Replace value of an element in an array of objects

I have an array of objects. If I do a console.log, I see this data.
[Object,Object,Object]
0: Object
Name: Ria
Age: 27
Job: Analytics & Review
1: Object
Name: Brian
Age: 23
Job: Admin
2: Object
Name: Rick
Age: 32
Job: Analytics & Review
As you can see at the Job part, I have & symbol. I want to replace that & with & since html does not allow & to pass directly through ajax since its a reserved entity.
Can someone let me know how I can replace & with & wherever they exist.
You can replace it
var data = [{ Name: 'Ria', Age: 27, Job: 'Analytics & Review'},
{ Name: 'Brian', Age: 23, Job: 'Admin'},
{ Name: 'Rick', Age: 32, Job: 'Analytics & Review'}];
data.forEach(function(currentValue, index, array) {
array[index] = JSON.parse(JSON.stringify(array[index]).replace('&', '&amp'));
});
Idea is to convert your entire array of object into string and then use regex to replace the symbol and then parse back the array of objects back from the string. Try this.
var newArray = JSON.parse(JSON.stringify(array).replace(/&/g,'&amp'));

Categories