How to use same tokeninput for multiple fields - javascript

I have a table in which a column(say names) consists of text field. I need same tokeninput for all the rows.
<script type="text/javascript">
$(function(){
$('#names').tokenInput([
{id: 7, name: "Super Mario"},
{id: 11, name: "Battletoads"},
{id: 13, name: "Pong"},
{id: 17, name: "The Legend of Zelda"},
{id: 19, name: "Metroid"},
{id: 23, name: "Donkey Kong Country"},
{id: 29, name: "Super Smash Bros."},
{id: 32, name: "Star Fox"},
{id: 35, name: "Starcraft"},
{id: 37, name: "Pokemon"},
{id: 38, name: "Minecraft"},
{id: 41, name: "The Sims"},
{id: 43, name: "Final Fantasy"},
{id: 44, name: "Resident Evil"},
{id: 46, name: "Kingdom Hearts"},
{id: 47, name: "Tetris"},
{id: 48, name: "Grand Theft Auto"},
{id: 51, name: "World of Warcraft"},
{id: 53, name: "Metal Gear Solid"},
{id: 54, name: "Civilization"},
{id: 56, name: "Pac-Man"},
{id: 59, name: "Animal Crossing"},
{id: 62, name: "Spyro the Dragon"},
{id: 64, name: "Crash Bandicoot"},
{id: 65, name: "Sonic the Hedgehog"},
{id: 72, name: "Tomb Raider"},
{id: 77, name: "Mortal Kombat"},
{id: 81, name: "Space Invaders"}
], {
theme: "facebook",
noResultsText: "Nothin' found.",
searchingText: "Searching...",
preventDuplicates: true
});
});
</script>
I need the above token input for multiple fields .
EX : say i have a table with a filed called Names. So i need for all the Name filed in each i want to use Same token input
Below is the Html
<tr><td><input type="text" id="names"></td></tr>
<tr><td><input type="text" id="names1"></td></tr>
<tr><td><input type="text" id="names2"></td></tr>
I am able to use for one text field, but i need it same for all the rows
Demo link: http://codepen.io/jakestuts/full/IBmja


You'll need to initialise them all individually - use a for loop.
var tokens = [
{id: 7, name: "Super Mario"},
{id: 11, name: "Battletoads"},
{id: 13, name: "Pong"},
etc...
{id: 72, name: "Tomb Raider"},
{id: 77, name: "Mortal Kombat"},
{id: 81, name: "Space Invaders"}
];
for (var i = 1; i <= 3; i++){
$('#names' + i).tokenInput(tokens, {
theme: "facebook",
noResultsText: "Nothin' found.",
searchingText: "Searching...",
preventDuplicates: true
});
}

Related

Comparing two arrays of nested objects and return new array of objects if compared values are not the same in javascript

I have been having trouble trying to figure out how to get this to work. I have two arrays of nested objects arr1 and arr2.
let arr1 =[{
id: 1,
rideS: [
{
id: 12,
station: {
id: 23,
street: "ABC"
}
}
]
},
{
id: 2,
rideS: [
{
id: 13,
station: {
id: 24,
street: "MMM"
}
}
]
}
]
let arr2 = [
{
id: 1,
so: {
id: 33,
sos: [{
id: 44,
station: {
id: 55,
street: "ABC"
}
},
{
id: 74,
station: {
id: 11,
street: "DDD"
}
}
]
}
},
{
id: 2,
so: {
id: 34,
sos: [{
id: 45,
station: {
id: 56,
street: "RRR"
}
},
{
id: 51,
station: {
id: 66,
street: "ZZZ"
}
}
]
}
},
{
id: 3,
so: {
id: 35,
sos: [{
id: 46,
station: {
id: 57,
street: "MMM"
}
},
{
id: 75,
station: {
id: 66,
street: "VVV"
}
}
]
}
}
]
I need to compare arr2 with arr1 using "street" porperty value of first object array in "sos" and as result i need to return not matched objects
For example if i compare this two arrys as result i expect:
let result = [
{
id: 2,
so: {
id: 34,
sos: [{
id: 45,
station: {
id: 56,
street: "RRR"
}
},
{
id: 51,
station: {
id: 66,
street: "ZZZ"
}
}
]
}
}
]
and this is what i have tried to do
let result = arr2.filter(o1 => o1.so.sos.some(o2 => !arr1.some(a1=> a1.rideS.some(a2 => o2.station.street === a2.station.street))))
and as result i get all objects, but i need somthing like this prob:
let result = arr2.filter(o1 => o1.so.sos[0].some(o2 => !arr1.some(a1=> a1.rideS.some(a2 => o2.station.street === a2.station.street))))

First we need to take out all the street address in a dictionary named streetDic and then check in array two if no value inside streetDic is present in its streets.
let arr1 =[{
id: 1,
rideS: [
{
id: 12,
station: {
id: 23,
street: "ABC"
}
}
]
},
{
id: 2,
rideS: [
{
id: 13,
station: {
id: 24,
street: "MMM"
}
}
]
}
]
let arr2 = [
{
id: 1,
so: {
id: 33,
sos: [{
id: 44,
station: {
id: 55,
street: "ABC"
}
},
{
id: 74,
station: {
id: 11,
street: "DDD"
}
}
]
}
},
{
id: 2,
so: {
id: 34,
sos: [{
id: 45,
station: {
id: 56,
street: "RRR"
}
},
{
id: 51,
station: {
id: 66,
street: "ZZZ"
}
}
]
}
},
{
id: 3,
so: {
id: 35,
sos: [{
id: 46,
station: {
id: 57,
street: "MMM"
}
},
{
id: 75,
station: {
id: 66,
street: "VVV"
}
}
]
}
}
]
let streetDic = arr1.reduce((dic, o) => { o.rideS.forEach(r => dic[r.station.street] = true); return dic; } , {})
let result = arr2.filter(o => !o.so.sos.some(s => streetDic[s.station.street]))
console.log(result);

Try to replace some with every:
let arr1 = [
{ id: 1, rideS: [{id: 12, station: {id: 23, street: "ABC",},},],},
{ id: 2, rideS: [{id: 13, station: {id: 24, street: "MMM",},},],},
];
let arr2 = [
{id: 1, so: {id: 33, sos: [{id: 44,station: {id: 55,street: "ABC",},}, {id: 74, station: {id: 11, street: "DDD",},},],},},
{id: 2, so: {id: 34,sos: [{id: 45, station: {id: 56, street: "RRR",},},{id: 51, station: {id: 66, street: "ZZZ",},},],},},
{id: 3, so: {id: 35, sos: [{id: 46, station: {id: 57, street: "MMM",},},{id: 75, station: {id: 66, street: "VVV",},},],},},
];
let result = arr2.filter(o1 => o1.so.sos.every(o2 => !arr1.some(a1 => a1.rideS.some(a2 => o2.station.street === a2.station.street))))
console.log(result)

Match spanish words replace method

this functions searchs names or categories of this array of objects, i need to ignore spanish letters with 'acento' (for example: i need to match 'Taragüí' if i write taragui), i solve this with the string replace() method, my question: Is there a way to solve this with some unicode method? Thanks in advance.
var fromDB = [
{id: 1, name: 'Almendras', category: 'Frutos secos', price: 25, amount: 0, description: 'asd'},
{id: 2, name: 'Nueces', category: 'Frutos secos', price: 10, amount: 0, description: 'asd'},
{id: 3, name: 'Mermelada', category: 'Jam', price: 15, amount: 0, description: 'asd'},
{id: 4, name: 'Alfajor', category: 'Sweet', price: 20, amount: 0, description: 'asd'},
{id: 5, name: 'Queso', category: 'UwU', price: 45, amount: 0, description: 'asd'},
{id: 6, name: 'Arandanos', category: 'Fruta', price: 50, amount: 0, description: 'asd'},
{id: 7, name: 'Maracuya', category: 'Fruta', price: 50, amount: 0, description: 'asd'},
{id: 8, name: 'Chocolate', category: 'Sweet', price: 50, amount: 0, description: 'asd'},
{id: 9, name: 'Mascarpone', category: 'UwU', price: 50, amount: 0, description: 'asd'},
{id: 9, name: 'Taragüí', category: 'UwU', price: 50, amount: 0, description: 'asd'}
];
const input = document.querySelector('input');
input.addEventListener('input', updateValue);
function updateValue(e) {
realTimeInputValue = e.target.value.toLowerCase();
let productsMatch = fromDB.filter(x => x.name.toLowerCase().replace('á', 'a').replace('é', 'e').replace('í', 'i').replace('ó', 'o').replace('ú', 'u').replace('ü', 'u').includes(realTimeInputValue))
if(productsMatch.length){
console.log(productsMatch)
} else {
let categoriesMatch = fromDB.filter(x => x.category.toLowerCase().includes(realTimeInputValue))
console.log(categoriesMatch);
}
}
<input type="text" placeholder="Enter some text" name="name"/>

move key to sub array js [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have an array of objects grouped by Name like this:
[
{
Name: 'Color',
Data:[{Id: 1, Name: 'Red'},
{Id: 2, Name: 'Yellow'},
{Id: 3, Name: 'Blue'},
{Id: 4, Name: 'Green'},
{Id: 7, Name: 'Black'}]
}, {
Name: 'Size',
Data:[{Id: 8, Name: 'S'},
{Id: 11, Name: 'M'},
{Id: 12, Name: 'L'},
{Id: 13, Name: 'XL'},
{Id: 14, Name: 'XXL'}]
}
]
I would like to transform this into a heavy array like this:
[
{Id: 1, Name: 'Red', optionName: 'Color'},
{Id: 2, Name: 'Yellow', optionName: 'Color'},
{Id: 3, Name: 'Blue', optionName: 'Color'},
{Id: 4, Name: 'Green', optionName: 'Color'},
{Id: 7, Name: 'Black', optionName: 'Color'},
{Id: 8, Name: 'S', optionName: 'Size'},
{Id: 11, Name: 'M', optionName: 'Size'},
{Id: 12, Name: 'L', optionName: 'Size'},
{Id: 13, Name: 'XL', optionName: 'Size'},
{Id: 14, Name: 'XXL', optionName: 'Size'}
]
How to do it in javascript/ES6?

You can use .map(), .concat() and Object.assign() methods to get the resultant array:
let data = [
{Name: 'Color', Data:[{Id: 1, Name: 'Red'}, {Id: 2, Name: 'Yellow'}, {Id: 3, Name: 'Blue'}, {Id: 4, Name: 'Green'}, {Id: 7, Name: 'Black'}]},
{Name: 'Size', Data:[{Id: 8, Name: 'S'}, {Id: 11, Name: 'M'}, {Id: 12, Name: 'L'}, {Id: 13, Name: 'XL'}, {Id: 14, Name: 'XXL'}]}
];
let result = [].concat(
...data.map(({Name, Data}) => Data.map(o => Object.assign({}, o, {optionName: Name})))
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can use array#reduce with array#forEach.
const data = [ { Name: 'Color', Data:[{Id: 1, Name: 'Red'}, {Id: 2, Name: 'Yellow'}, {Id: 3, Name: 'Blue'}, {Id: 4, Name: 'Green'}, {Id: 7, Name: 'Black'}] }, { Name: 'Size', Data:[{Id: 8, Name: 'S'}, {Id: 11, Name: 'M'}, {Id: 12, Name: 'L'}, {Id: 13,Name: 'XL'}, {Id: 14, Name: 'XXL'}] } ],
result = data.reduce((r, {Name: optionName,Data}) => {
Data.forEach(({Id, Name}) => r.push({Id,Name, optionName}));
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can also able to do it using forEach. like below.
var s = [{Name:'Color',Data:[{Id:1,Name:'Red'},{Id:2,Name:'Yellow'},{Id:3,Name:'Blue'},{Id:4,Name:'Green'},{Id:7,Name:'Black'}]},{Name:'Size',Data:[{Id:8,Name:'S'},{Id:11,Name:'M'},{Id:12,Name:'L'},{Id:13,Name:'XL'},{Id:14,Name:'XXL'}]}];
var y=[];
s.forEach(x=>x.Data.forEach(z=>{
z['optionName'] = x.Name;
y.push(z);
}));
console.log(y);

What is the good way to loop through a javascript array? [duplicate]

This question already has answers here:
Split array into chunks
(73 answers)
Closed 5 years ago.
Consider the following JavaScript Array:
const allRows = [
{id: 1, name: Name 1},
{id: 2, name: Name 1},
{id: 3, name: Name 1},
{id: 4, name: Name 1},
{id: 5, name: Name 1},
{id: 6, name: Name 1},
{id: 7, name: Name 1},
{id: 8, name: Name 1},
{id: 9, name: Name 1},
{id: 10, name: Name 1},
{id: 11, name: Name 1},
{id: 12, name: Name 1},
{id: 13, name: Name 1},
{id: 14, name: Name 1},
{id: 15, name: Name 1},
{id: 16, name: Name 1},
{id: 17, name: Name 1},
{id: 18, name: Name 1},
{id: 19, name: Name 1},
{id: 20, name: Name 1},
{id: 21, name: Name 1},
{id: 22, name: Name 1},
{id: 23, name: Name 1},
{id: 24, name: Name 1},
{id: 25, name: Name 1},
{id: 26, name: Name 1},
{id: 27, name: Name 1},
{id: 28, name: Name 1},
{id: 29, name: Name 1},
{id: 30, name: Name 1},
];
// want to loop through the array and convert it to the array as written below
let rowsPaginated = [
[
{id: 1, name: Name 1},
{id: 2, name: Name 1},
{id: 3, name: Name 1},
{id: 4, name: Name 1},
{id: 5, name: Name 1},
{id: 6, name: Name 1},
{id: 7, name: Name 1},
{id: 8, name: Name 1},
{id: 9, name: Name 1},
{id: 10, name: Name 1}
],
[
{id: 11, name: Name 1},
{id: 12, name: Name 1},
{id: 13, name: Name 1},
{id: 14, name: Name 1},
{id: 15, name: Name 1},
{id: 16, name: Name 1},
{id: 17, name: Name 1},
{id: 18, name: Name 1},
{id: 19, name: Name 1},
{id: 20, name: Name 1}
],
[
{id: 21, name: Name 1},
{id: 22, name: Name 1},
{id: 23, name: Name 1},
{id: 24, name: Name 1},
{id: 25, name: Name 1},
{id: 26, name: Name 1},
{id: 27, name: Name 1},
{id: 28, name: Name 1},
{id: 29, name: Name 1},
{id: 30, name: Name 1}
]
];
I am thinking to convert this way -
for (let i = 0; i < allRows.length; i++) {
console.log(allRows[i]);
}
But I don't think it will be a good way to do it.
What is the best way to loop through the allRows array and convert as rowsPaginated array?

Use array's slice() with the size you want to cut from the array. Try the following:
const allRows = [
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 1'},
{id: 3, name: 'Name 1'},
{id: 4, name: 'Name 1'},
{id: 5, name: 'Name 1'},
{id: 6, name: 'Name 1'},
{id: 7, name: 'Name 1'},
{id: 8, name: 'Name 1'},
{id: 9, name: 'Name 1'},
{id: 10, name: 'Name 1'},
{id: 11, name: 'Name 1'},
{id: 12, name: 'Name 1'},
{id: 13, name: 'Name 1'},
{id: 14, name: 'Name 1'},
{id: 15, name: 'Name 1'},
{id: 16, name: 'Name 1'},
{id: 17, name: 'Name 1'},
{id: 18, name: 'Name 1'},
{id: 19, name: 'Name 1'},
{id: 20, name: 'Name 1'},
{id: 21, name: 'Name 1'},
{id: 22, name: 'Name 1'},
{id: 23, name: 'Name 1'},
{id: 24, name: 'Name 1'},
{id: 25, name: 'Name 1'},
{id: 26, name: 'Name 1'},
{id: 27, name: 'Name 1'},
{id: 28, name: 'Name 1'},
{id: 29, name: 'Name 1'},
{id: 30, name: 'Name 1'},
];
let rowsPaginated = [];
var i, j, size = 10;
for (i = 0, j = allRows.length; i < j; i += size) {
rowsPaginated.push(allRows.slice(i, i+size));
}
console.log(rowsPaginated);

Try following code, I corrected your array was few mistakes:
const allRows = [
{id: 1, name: "Name1"},
{id: 2, name: "Name1"},
{id: 3, name: "Name1"},
{id: 4, name: "Name1"},
{id: 5, name: "Name1"},
{id: 6, name: "Name1"},
{id: 7, name: "Name1"},
{id: 8, name: "Name1"},
{id: 9, name: "Name1"},
{id: 10, name: "Name1"},
{id: 11, name: "Name1"},
{id: 12, name: "Name1"},
{id: 13, name: "Name1"},
{id: 14, name: "Name1"},
{id: 15, name: "Name1"},
{id: 16, name: "Name1"},
{id: 17, name: "Name1"},
{id: 18, name: "Name1"},
{id: 19, name: "Name1"},
{id: 20, name: "Name1"},
{id: 21, name: "Name1"},
{id: 22, name: "Name1"},
{id: 23, name: "Name1"},
{id: 24, name: "Name1"},
{id: 25, name: "Name1"},
{id: 26, name: "Name1"},
{id: 27, name: "Name1"},
{id: 28, name: "Name1"},
{id: 29, name: "Name1"},
{id: 30, name: "Name1"}
];
let rowsPaginated = [];
let j = 0;
for (let i = 0, j = allRows.length; i < j; i += 10) {
rowsPaginated.push(allRows.slice(i, i+10));
}
console.log(rowsPaginated);

Searching values in array of objects /Javascript

Consider the following arrays of objects :
[{ id: 5, name: "Spain"},
{ id: 6, name: "Denmark"},
{ id: 7, name: "USA"},
{ id: 8, name: "Iceland"},
{ id: 9, name: "Greece"},
{ id: 10, name: "UK"},
{ id: 11, name: "Germany"},
{ id: 12, name: "Italy"}]
[{ id: 13, name: "US"},
{ id: 14, name: "GR"},
{ id: 15, name: "ESP"},
{ id: 16, name: "ICEL"},
{ id: 17, name: "DEN"},
{ id: 18, name: "UK"},
{ id: 19, name: "IT"},
{ id: 20, name: "GER"}]
I want to search through the first array and find the respective match for the second array. Or even better get one element from the second array and search for it against all the values in the first array .
EX. GER = { id: 11, name: "Germany"}
IT = { id: 12, name: "Italy"}
Is there a best practise for implementing this kind of search ?

If you are looking for a data structure, you could use an object with the reference to the objects of the first array.
You need to implement it by hand as long as you do not have a relation of the matching id.
countries = {
ESP: { id: 5, name: "Spain"},
DEN: { id: 6, name: "Denmark"},
US: { id: 7, name: "USA"},
ICEL: { id: 8, name: "Iceland"},
GR: { id: 9, name: "Greece"},
UK: { id: 10, name: "UK"},
GER: { id: 11, name: "Germany"},
IT: { id: 12, name: "Italy"}
}
Access via
countries.ICEL.name // Iceland
or
country = 'GR'
countries[country].name // Greece

Categories

Resources