We Keep Coding

How do I loop through Javascript array objects with forEach to create an element?

I'm trying to loop through an array object with JavaScript forEach, then the function should create an OPTION element, set its value to the item's id, set its text to the item's name, and then add the OPTION to the SELECT element?
I've tried returning each item as template literals
const currencies = [{
id: 'USD', name: 'US Dollars'
}, {
id: 'UGX', name: 'Ugandan Shillings'
}, {
id: 'KES', name: 'Kenyan Shillings'
}, {
id: 'GHS', name: 'Ghanian Cedi'
}, {
id: 'ZAR', name: 'South African Rand'
}];
currencies.forEach(function(currency){
str = `<option value="${id}"></option>`
})

You can do something like this:
const currencies = [{
id: 'USD',
name: 'US Dollars'
}, {
id: 'UGX',
name: 'Ugandan Shillings'
}, {
id: 'KES',
name: 'Kenyan Shillings'
}, {
id: 'GHS',
name: 'Ghanian Cedi'
}, {
id: 'ZAR',
name: 'South African Rand'
}];
const selectEl = document.querySelector('#selectEl');
currencies.forEach(function(currency) {
const option = document.createElement('option');
option.setAttribute('value', currency.id);
option.text = currency.name;
selectEl.appendChild(option);
})
<select id="selectEl">

const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];
$('select').append(currencies.map(c => $(`<option value="${c.id}">${c.name}</option>`)));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select></select>

You have to use Template literals (that are enclosed with back-tick (` `)) which allows embedded expressions:
const currencies = [{ id: 'USD', name: 'US Dollars' }, {
id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];
var str = '';
currencies.forEach(function(currency){
str += `<option value=${currency.id}>${currency.name}</option>`;
});
document.getElementById('mySelect').innerHTML = str;
<select id="mySelect"></select>

Here you have one approach thay uses Array::map() and Array::join():
const currencies = [
{id: 'USD', name: 'US Dollars'},
{id: 'UGX', name: 'Ugandan Shillings'},
{id: 'KES', name: 'Kenyan Shillings'},
{id: 'GHS', name: 'Ghanian Cedi'},
{id: 'ZAR', name: 'South African Rand'}
];
let sel = document.getElementById("mySelect");
sel.innerHTML = currencies.map(
({id, name}) => `<option value=${id}>${name}</option>`
).join("");
<select id="mySelect"></select>

With jQuery
const currencies = [{ id: 'USD', name: 'US Dollars' }, {
id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];
currencies.forEach(function(currency){
$('#list').append(`<option value="${currency.id}">${currency.name}</option>`)
})
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<select id="list"></select>
With pure JS
const currencies = [{ id: 'USD', name: 'US Dollars' }, {
id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];
currencies.forEach(function(currency){
var el = document.getElementById('list');
var elChild = document.createElement('option');
// Give the new div some content
elChild.innerHTML = currency.name;
elChild.id = currency.id
// Jug it into the parent element
el.appendChild(elChild);
})
<select id="list"></select>

Categorize array of objects into a new array

I have an array and I need to map this array into an array of its children.
var data = [{
name: 'Cars',
content: 'BMW',
value: 2000
},
{
name: 'Cars',
content: 'Fiat',
value: 542
},
{
name: 'Cars',
content: 'Mercedes',
value: 745
},
{
name: 'Cars',
content: 'Toyota',
value: 965
},
{
name: 'Cars',
content: 'Honda',
value: 754
}, {
name: 'Cars',
content: 'VW',
value: 123
},
{
name: 'Cars',
content: 'Ford',
value: 200
},
{
name: 'Fruits',
content: 'Apple',
value: 500
}, {
name: 'Fruits',
content: 'Orange',
value: 769
}, {
name: 'Fruits',
content: 'Banana',
value: 120
}, {
name: 'Fruits',
content: 'Strawberry',
value: 48
}, {
name: 'Fruits',
content: 'Mango',
value: 653
},
{
name: 'Colors',
content: 'Red',
value: 965
}, {
name: 'Colors',
content: 'Black',
value: 931
}, {
name: 'Colors',
content: 'BMW',
value: 423
}, {
name: 'Colors',
content: 'BMW',
value: 964
}, {
name: 'Colors',
content: 'BMW',
value: 436
}
]
The end result what I want must be like this:
[
{
name: "Children Array",
children: [
{
name: "Cars",
children: [
{
name: "BMW",
value: 2000
},
{
name: "Fiat",
value: 542
},
{
...
}
]
},
{
name: "Fruits",
children: [
{
name: 'Apple',
value: 500
},
{
name: 'Orange',
value: 769
},
{
...
}
]
},
{
name: "Colors",
children: [
{
name: 'Red',
value: 965
},
{
...
}
]
}
]
}
]
This is what I did.
var data = [{
name: 'Cars',
content: 'BMW',
value: 2000
},
{
name: 'Cars',
content: 'Fiat',
value: 542
},
{
name: 'Cars',
content: 'Mercedes',
value: 745
},
{
name: 'Cars',
content: 'Toyota',
value: 965
},
{
name: 'Cars',
content: 'Honda',
value: 754
}, {
name: 'Cars',
content: 'VW',
value: 123
},
{
name: 'Cars',
content: 'Ford',
value: 200
},
{
name: 'Fruits',
content: 'Apple',
value: 500
}, {
name: 'Fruits',
content: 'Orange',
value: 769
}, {
name: 'Fruits',
content: 'Banana',
value: 120
}, {
name: 'Fruits',
content: 'Strawberry',
value: 48
}, {
name: 'Fruits',
content: 'Mango',
value: 653
},
{
name: 'Colors',
content: 'Red',
value: 965
}, {
name: 'Colors',
content: 'Black',
value: 931
}, {
name: 'Colors',
content: 'BMW',
value: 423
}, {
name: 'Colors',
content: 'BMW',
value: 964
}, {
name: 'Colors',
content: 'BMW',
value: 436
}
]
const layer1 = _.uniqWith(_.map(data, (item) => {
return item.name
}), _.isEqual)
const newArray = [{
name: 'Children Array',
children: _.map(layer1, (item) => {
return {
name: item,
children: _.map(data, (item) => {
return {
}
})
}
})
}]
console.log(newArray)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
I do not know how to proceed with the second children layer.
Please advice.

You could group the data and give the result the final layout.
var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, { name: 'Cars', content: 'Fiat', value: 542 }, { name: 'Cars', content: 'Mercedes', value: 745 }, { name: 'Cars', content: 'Toyota', value: 965 }, { name: 'Cars', content: 'Honda', value: 754 }, { name: 'Cars', content: 'VW', value: 123 }, { name: 'Cars', content: 'Ford', value: 200 }, { name: 'Fruits', content: 'Apple', value: 500 }, { name: 'Fruits', content: 'Orange', value: 769 }, { name: 'Fruits', content: 'Banana', value: 120 }, { name: 'Fruits', content: 'Strawberry', value: 48 }, { name: 'Fruits', content: 'Mango', value: 653 }, { name: 'Colors', content: 'Red', value: 965 }, { name: 'Colors', content: 'Black', value: 931 }, { name: 'Colors', content: 'BMW', value: 423 }, { name: 'Colors', content: 'BMW', value: 964 }, { name: 'Colors', content: 'BMW', value: 436 }],
result = _(data)
.groupBy('name')
.map((group, name) =>
({ name, children: _.map(group, ({ content: name, value }) => ({ name, value })) }))
.value(),
final = [{ name: "Children Array", children: result }];
console.log(final);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

You can also do that with ES6 only via Object.entries & reduce:
var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, { name: 'Cars', content: 'Fiat', value: 542 }, { name: 'Cars', content: 'Mercedes', value: 745 }, { name: 'Cars', content: 'Toyota', value: 965 }, { name: 'Cars', content: 'Honda', value: 754 }, { name: 'Cars', content: 'VW', value: 123 }, { name: 'Cars', content: 'Ford', value: 200 }, { name: 'Fruits', content: 'Apple', value: 500 }, { name: 'Fruits', content: 'Orange', value: 769 }, { name: 'Fruits', content: 'Banana', value: 120 }, { name: 'Fruits', content: 'Strawberry', value: 48 }, { name: 'Fruits', content: 'Mango', value: 653 }, { name: 'Colors', content: 'Red', value: 965 }, { name: 'Colors', content: 'Black', value: 931 }, { name: 'Colors', content: 'BMW', value: 423 }, { name: 'Colors', content: 'BMW', value: 964 }, { name: 'Colors', content: 'BMW', value: 436 }]
const groupData = (d) => {
let g = Object.entries(d.reduce((r,c)=>(r[c.name]=[...r[c.name]||[], c],r),{}))
return g.reduce((r,c) => (r.children.push(
{name: c[0], children: c[1]}), r),{name: "Children Array", children:[]})}
console.log(groupData(data))
The idea is via the first grouping to get an object with the name groups and after that you simply get the entries on that object and reduce on them to get the final result.
Also you start the main reduce with your predefined object etc.

Filter array by obj field and get new array with this obj field

I have const data, and i need filter cards array by obj field company
For example by company: 'Symu.co'
const data = {
lanes: [
{
id: 'lane1',
header: 'Quened',
label: '',
cards: [
{id: 'Task1', title: 'Wordpress theme', company: 'Symu.co', price: 1500, user: 'michelle'},
]
},
{
id: 'lane2',
header: 'Planning',
label: '',
cards: [
{id: 'Task2', title: 'Landing page', company: 'Google', price: 1500, user: 'jolene'},
{id: 'Task3', title: 'New website', company: 'Symu.co', price: 1500, user: 'lyall'},
{id: 'Task4', title: 'Dashboard', company: 'Microsoft', price: 1500, user: 'john'},
{id: 'Task5', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'dominic'},
]
},
{
id: 'lane3',
header: 'Design',
label: '',
cards: [
{id: 'Task6', title: 'New Logo', company: 'Google', price: 1500, user: 'michelle'},
{id: 'Task7', title: 'New website', company: 'JCD.pl', price: 1500, user: 'dominic'},
{id: 'Task8', title: 'New website', company: 'Themeforest', price: 1500, user: 'john'},
{id: 'Task9', title: 'Dashboard', company: 'JCD.pl', price: 1500, user: 'jolene'},
]
},
{
id: 'lane4',
header: 'Development',
label: '()',
cards: [
{id: 'Task10', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'john'},
{id: 'Task11', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle'},
{id: 'Task12', title: 'Dashboard', company: 'Google', price: 1500, user: 'dominic'},
]
},
{
id: 'lane5',
header: 'Testing',
label: '()',
cards: [
{id: 'Task13', title: 'Landing page', company: 'JCD.pl', price: 1500, user: 'lyall'},
]
},
{
id: 'lane6',
header: 'Production',
label: '()',
cards: [
{id: 'Task14', title: 'Landing page', company: 'Google', price: 1500, user: 'jolene'},
{id: 'Task15', title: 'New website', company: 'Themeforest', price: 1500, user: 'michelle'},
{id: 'Task16', title: 'Dashboard', company: 'Facebook', price: 1500, user: 'lyall'},
]
},
{
id: 'lane7',
header: 'Completed',
label: '()',
cards: [
{id: 'Task17', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'john'},
{id: 'Task18', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle'},
]
},
]
};
My code , but i don`t know how to right do it
for(let i = 0; i < data.lanes.length; i++) {
var changeCards = data.lanes[i].cards.filter(function(obj) {
return obj.company === 'Symu.co';
console.log(changeCards);
});
}
in output i need to get new var new array as example
in output i need to get new var new array as example
in output i need to get new var new array as example
in output i need to get new var new array as example
in output i need to get new var new array as example
in output i need to get new var new array as example
in output i need to get new var new array as example
var newArray = {
lanes: [
{
id: 'lane1',
header: 'Quened',
label: '',
cards: [
{id: 'Task1', title: 'Wordpress theme', company: 'Symu.co', price: 1500, user: 'michelle'
},
]
},
{
id: 'lane2',
header: 'Planning',
label: '',
cards: [
{id: 'Task3', title: 'New website', company: 'Symu.co', price: 1500, user: 'lyall'}
]
},
{
id: 'lane3',
header: 'Design',
label: '',
cards: [
]
},
{
id: 'lane4',
header: 'Development',
label: '()',
cards: [
{id: 'Task11', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle'},
]
},
{
id: 'lane5',
header: 'Testing',
label: '()',
cards: [
]
},
{
id: 'lane6',
header: 'Production',
label: '()',
cards: [
]
},
{
id: 'lane7',
header: 'Completed',
label: '()',
cards: [
{id: 'Task18', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle'},
]
},
]
};
But i dont know how to do it
Help please!
Thanks a lot

You can use the functions reduce, forEach and filter to build the desired output.
const data = { lanes: [ { id: 'lane1', header: 'Quened', label: '', cards: [ {id: 'Task1', title: 'Wordpress theme', company: 'Symu.co', price: 1500, user: 'michelle'}, ] }, { id: 'lane2', header: 'Planning', label: '', cards: [ {id: 'Task2', title: 'Landing page', company: 'Google', price: 1500, user: 'jolene'}, {id: 'Task3', title: 'New website', company: 'Symu.co', price: 1500, user: 'lyall'}, {id: 'Task4', title: 'Dashboard', company: 'Microsoft', price: 1500, user: 'john'}, {id: 'Task5', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'dominic'}, ] }, { id: 'lane3', header: 'Design', label: '', cards: [ {id: 'Task6', title: 'New Logo', company: 'Google', price: 1500, user: 'michelle'}, {id: 'Task7', title: 'New website', company: 'JCD.pl', price: 1500, user: 'dominic'}, {id: 'Task8', title: 'New website', company: 'Themeforest', price: 1500, user: 'john'}, {id: 'Task9', title: 'Dashboard', company: 'JCD.pl', price: 1500, user: 'jolene'}, ] }, { id: 'lane4', header: 'Development', label: '()', cards: [ {id: 'Task10', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'john'}, {id: 'Task11', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle'}, {id: 'Task12', title: 'Dashboard', company: 'Google', price: 1500, user: 'dominic'}, ] }, { id: 'lane5', header: 'Testing', label: '()', cards: [ {id: 'Task13', title: 'Landing page', company: 'JCD.pl', price: 1500, user: 'lyall'}, ] }, { id: 'lane6', header: 'Production', label: '()', cards: [ {id: 'Task14', title: 'Landing page', company: 'Google', price: 1500, user: 'jolene'}, {id: 'Task15', title: 'New website', company: 'Themeforest', price: 1500, user: 'michelle'}, {id: 'Task16', title: 'Dashboard', company: 'Facebook', price: 1500, user: 'lyall'}, ] }, { id: 'lane7', header: 'Completed', label: '()', cards: [ {id: 'Task17', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'john'}, {id: 'Task18', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle'}, ] },]};
function filterBy(target) {
return data.lanes.reduce((a, {id, header, label, cards}) => {
a.lanes.push({id, header, label, cards: cards.filter(({company}) => company === target)});
return a;
}, {lanes: []});
}
var result = filterBy('Symu.co');
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

const filteredCards = cards.filter({ company } => company === 'Google');
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

var data = { lanes: [ { id: 'lane1', header: 'Quened', label: '', cards: [ { id: 'Task1', title: 'Wordpress theme', company: 'Symu.co', price: 1500, user: 'michelle' }, ] }, { id: 'lane2', header: 'Planning', label: '', cards: [ { id: 'Task2', title: 'Landing page', company: 'Google', price: 1500, user: 'jolene' }, { id: 'Task3', title: 'New website', company: 'Symu.co', price: 1500, user: 'lyall' }, { id: 'Task4', title: 'Dashboard', company: 'Microsoft', price: 1500, user: 'john' }, { id: 'Task5', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'dominic' }, ] }, { id: 'lane3', header: 'Design', label: '', cards: [ { id: 'Task6', title: 'New Logo', company: 'Google', price: 1500, user: 'michelle' }, { id: 'Task7', title: 'New website', company: 'JCD.pl', price: 1500, user: 'dominic' }, { id: 'Task8', title: 'New website', company: 'Themeforest', price: 1500, user: 'john' }, { id: 'Task9', title: 'Dashboard', company: 'JCD.pl', price: 1500, user: 'jolene' }, ] }, { id: 'lane4', header: 'Development', label: '()', cards: [ { id: 'Task10', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'john' }, { id: 'Task11', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle' }, { id: 'Task12', title: 'Dashboard', company: 'Google', price: 1500, user: 'dominic' }, ] }, { id: 'lane5', header: 'Testing', label: '()', cards: [ { id: 'Task13', title: 'Landing page', company: 'JCD.pl', price: 1500, user: 'lyall' }, ] }, { id: 'lane6', header: 'Production', label: '()', cards: [ { id: 'Task14', title: 'Landing page', company: 'Google', price: 1500, user: 'jolene' }, { id: 'Task15', title: 'New website', company: 'Themeforest', price: 1500, user: 'michelle' }, { id: 'Task16', title: 'Dashboard', company: 'Facebook', price: 1500, user: 'lyall' }, ] }, { id: 'lane7', header: 'Completed', label: '()', cards: [ { id: 'Task17', title: 'Mobile App', company: 'Facebook', price: 1500, user: 'john' }, { id: 'Task18', title: 'New website', company: 'Symu.co', price: 1500, user: 'michelle' }, ] },] }
var filter = c => data.lanes.reduce((a, v) =>
(a.push( { ...v, cards: v.cards.filter(v => v.company == c) } ), a), [])
console.log( filter('Symu.co') )

Display drop down with images in select tag using only javascript

I would like to display a drop down with images and text.
similar to this http://www.marghoobsuleman.com/countries-dropdown-flags but using javascript
I have a restriction to use only javascript to solve this.
I tried using the below code but it seems to work only in Mozilla
<select>
<option value="Country">Country</option>
<option value="Germany" class="c_germany">Germany</option>
<option value="USA" class="c_usa">USA</option>
</select>
<style>
.c_germany { background-image:url(download.png); }
</style>

<script language="javascript">
(function($) {
$(function() {
var isoCountries = [
{ id: 'AF', text: 'Afghanistan'},
{ id: 'AX', text: 'Aland Islands'},
{ id: 'AL', text: 'Albania'},
{ id: 'DZ', text: 'Algeria'},
{ id: 'AS', text: 'American Samoa'},
{ id: 'AD', text: 'Andorra'},
{ id: 'AO', text: 'Angola'},
{ id: 'AI', text: 'Anguilla'},
{ id: 'AQ', text: 'Antarctica'},
{ id: 'AG', text: 'Antigua And Barbuda'},
{ id: 'AR', text: 'Argentina'},
{ id: 'AM', text: 'Armenia'},
{ id: 'AW', text: 'Aruba'},
{ id: 'AU', text: 'Australia'},
{ id: 'AT', text: 'Austria'},
{ id: 'AZ', text: 'Azerbaijan'},
{ id: 'BS', text: 'Bahamas'},
{ id: 'BH', text: 'Bahrain'},
{ id: 'BD', text: 'Bangladesh'},
{ id: 'BB', text: 'Barbados'},
{ id: 'BY', text: 'Belarus'},
{ id: 'BE', text: 'Belgium'},
{ id: 'BZ', text: 'Belize'},
{ id: 'BJ', text: 'Benin'},
{ id: 'BM', text: 'Bermuda'},
{ id: 'BT', text: 'Bhutan'},
{ id: 'BO', text: 'Bolivia'},
{ id: 'BA', text: 'Bosnia And Herzegovina'},
{ id: 'BW', text: 'Botswana'},
{ id: 'BV', text: 'Bouvet Island'},
{ id: 'BR', text: 'Brazil'},
{ id: 'IO', text: 'British Indian Ocean Territory'},
{ id: 'BN', text: 'Brunei Darussalam'},
{ id: 'BG', text: 'Bulgaria'},
{ id: 'BF', text: 'Burkina Faso'},
{ id: 'BI', text: 'Burundi'},
{ id: 'KH', text: 'Cambodia'},
{ id: 'CM', text: 'Cameroon'},
{ id: 'CA', text: 'Canada'},
{ id: 'CV', text: 'Cape Verde'},
{ id: 'KY', text: 'Cayman Islands'},
{ id: 'CF', text: 'Central African Republic'},
{ id: 'TD', text: 'Chad'},
{ id: 'CL', text: 'Chile'},
{ id: 'CN', text: 'China'},
{ id: 'CX', text: 'Christmas Island'},
{ id: 'CC', text: 'Cocos (Keeling) Islands'},
{ id: 'CO', text: 'Colombia'},
{ id: 'KM', text: 'Comoros'},
{ id: 'CG', text: 'Congo'},
{ id: 'CD', text: 'Congo}, Democratic Republic'},
{ id: 'CK', text: 'Cook Islands'},
{ id: 'CR', text: 'Costa Rica'},
{ id: 'CI', text: 'Cote D\'Ivoire'},
{ id: 'HR', text: 'Croatia'},
{ id: 'CU', text: 'Cuba'},
{ id: 'CY', text: 'Cyprus'},
{ id: 'CZ', text: 'Czech Republic'},
{ id: 'DK', text: 'Denmark'},
{ id: 'DJ', text: 'Djibouti'},
{ id: 'DM', text: 'Dominica'},
{ id: 'DO', text: 'Dominican Republic'},
{ id: 'EC', text: 'Ecuador'},
{ id: 'EG', text: 'Egypt'},
{ id: 'SV', text: 'El Salvador'},
{ id: 'GQ', text: 'Equatorial Guinea'},
{ id: 'ER', text: 'Eritrea'},
{ id: 'EE', text: 'Estonia'},
{ id: 'ET', text: 'Ethiopia'},
{ id: 'FK', text: 'Falkland Islands (Malvinas)'},
{ id: 'FO', text: 'Faroe Islands'},
{ id: 'FJ', text: 'Fiji'},
{ id: 'FI', text: 'Finland'},
{ id: 'FR', text: 'France'},
{ id: 'GF', text: 'French Guiana'},
{ id: 'PF', text: 'French Polynesia'},
{ id: 'TF', text: 'French Southern Territories'},
{ id: 'GA', text: 'Gabon'},
{ id: 'GM', text: 'Gambia'},
{ id: 'GE', text: 'Georgia'},
{ id: 'DE', text: 'Germany'},
{ id: 'GH', text: 'Ghana'},
{ id: 'GI', text: 'Gibraltar'},
{ id: 'GR', text: 'Greece'},
{ id: 'GL', text: 'Greenland'},
{ id: 'GD', text: 'Grenada'},
{ id: 'GP', text: 'Guadeloupe'},
{ id: 'GU', text: 'Guam'},
{ id: 'GT', text: 'Guatemala'},
{ id: 'GG', text: 'Guernsey'},
{ id: 'GN', text: 'Guinea'},
{ id: 'GW', text: 'Guinea-Bissau'},
{ id: 'GY', text: 'Guyana'},
{ id: 'HT', text: 'Haiti'},
{ id: 'HM', text: 'Heard Island & Mcdonald Islands'},
{ id: 'VA', text: 'Holy See (Vatican City State)'},
{ id: 'HN', text: 'Honduras'},
{ id: 'HK', text: 'Hong Kong'},
{ id: 'HU', text: 'Hungary'},
{ id: 'IS', text: 'Iceland'},
{ id: 'IN', text: 'India'},
{ id: 'ID', text: 'Indonesia'},
{ id: 'IR', text: 'Iran}, Islamic Republic Of'},
{ id: 'IQ', text: 'Iraq'},
{ id: 'IE', text: 'Ireland'},
{ id: 'IM', text: 'Isle Of Man'},
{ id: 'IL', text: 'Israel'},
{ id: 'IT', text: 'Italy'},
{ id: 'JM', text: 'Jamaica'},
{ id: 'JP', text: 'Japan'},
{ id: 'JE', text: 'Jersey'},
{ id: 'JO', text: 'Jordan'},
{ id: 'KZ', text: 'Kazakhstan'},
{ id: 'KE', text: 'Kenya'},
{ id: 'KI', text: 'Kiribati'},
{ id: 'KR', text: 'Korea'},
{ id: 'KW', text: 'Kuwait'},
{ id: 'KG', text: 'Kyrgyzstan'},
{ id: 'LA', text: 'Lao People\'s Democratic Republic'},
{ id: 'LV', text: 'Latvia'},
{ id: 'LB', text: 'Lebanon'},
{ id: 'LS', text: 'Lesotho'},
{ id: 'LR', text: 'Liberia'},
{ id: 'LY', text: 'Libyan Arab Jamahiriya'},
{ id: 'LI', text: 'Liechtenstein'},
{ id: 'LT', text: 'Lithuania'},
{ id: 'LU', text: 'Luxembourg'},
{ id: 'MO', text: 'Macao'},
{ id: 'MK', text: 'Macedonia'},
{ id: 'MG', text: 'Madagascar'},
{ id: 'MW', text: 'Malawi'},
{ id: 'MY', text: 'Malaysia'},
{ id: 'MV', text: 'Maldives'},
{ id: 'ML', text: 'Mali'},
{ id: 'MT', text: 'Malta'},
{ id: 'MH', text: 'Marshall Islands'},
{ id: 'MQ', text: 'Martinique'},
{ id: 'MR', text: 'Mauritania'},
{ id: 'MU', text: 'Mauritius'},
{ id: 'YT', text: 'Mayotte'},
{ id: 'MX', text: 'Mexico'},
{ id: 'FM', text: 'Micronesia}, Federated States Of'},
{ id: 'MD', text: 'Moldova'},
{ id: 'MC', text: 'Monaco'},
{ id: 'MN', text: 'Mongolia'},
{ id: 'ME', text: 'Montenegro'},
{ id: 'MS', text: 'Montserrat'},
{ id: 'MA', text: 'Morocco'},
{ id: 'MZ', text: 'Mozambique'},
{ id: 'MM', text: 'Myanmar'},
{ id: 'NA', text: 'Namibia'},
{ id: 'NR', text: 'Nauru'},
{ id: 'NP', text: 'Nepal'},
{ id: 'NL', text: 'Netherlands'},
{ id: 'AN', text: 'Netherlands Antilles'},
{ id: 'NC', text: 'New Caledonia'},
{ id: 'NZ', text: 'New Zealand'},
{ id: 'NI', text: 'Nicaragua'},
{ id: 'NE', text: 'Niger'},
{ id: 'NG', text: 'Nigeria'},
{ id: 'NU', text: 'Niue'},
{ id: 'NF', text: 'Norfolk Island'},
{ id: 'MP', text: 'Northern Mariana Islands'},
{ id: 'NO', text: 'Norway'},
{ id: 'OM', text: 'Oman'},
{ id: 'PK', text: 'Pakistan'},
{ id: 'PW', text: 'Palau'},
{ id: 'PS', text: 'Palestinian Territory}, Occupied'},
{ id: 'PA', text: 'Panama'},
{ id: 'PG', text: 'Papua New Guinea'},
{ id: 'PY', text: 'Paraguay'},
{ id: 'PE', text: 'Peru'},
{ id: 'PH', text: 'Philippines'},
{ id: 'PN', text: 'Pitcairn'},
{ id: 'PL', text: 'Poland'},
{ id: 'PT', text: 'Portugal'},
{ id: 'PR', text: 'Puerto Rico'},
{ id: 'QA', text: 'Qatar'},
{ id: 'RE', text: 'Reunion'},
{ id: 'RO', text: 'Romania'},
{ id: 'RU', text: 'Russian Federation'},
{ id: 'RW', text: 'Rwanda'},
{ id: 'BL', text: 'Saint Barthelemy'},
{ id: 'SH', text: 'Saint Helena'},
{ id: 'KN', text: 'Saint Kitts And Nevis'},
{ id: 'LC', text: 'Saint Lucia'},
{ id: 'MF', text: 'Saint Martin'},
{ id: 'PM', text: 'Saint Pierre And Miquelon'},
{ id: 'VC', text: 'Saint Vincent And Grenadines'},
{ id: 'WS', text: 'Samoa'},
{ id: 'SM', text: 'San Marino'},
{ id: 'ST', text: 'Sao Tome And Principe'},
{ id: 'SA', text: 'Saudi Arabia'},
{ id: 'SN', text: 'Senegal'},
{ id: 'RS', text: 'Serbia'},
{ id: 'SC', text: 'Seychelles'},
{ id: 'SL', text: 'Sierra Leone'},
{ id: 'SG', text: 'Singapore'},
{ id: 'SK', text: 'Slovakia'},
{ id: 'SI', text: 'Slovenia'},
{ id: 'SB', text: 'Solomon Islands'},
{ id: 'SO', text: 'Somalia'},
{ id: 'ZA', text: 'South Africa'},
{ id: 'GS', text: 'South Georgia And Sandwich Isl.'},
{ id: 'ES', text: 'Spain'},
{ id: 'LK', text: 'Sri Lanka'},
{ id: 'SD', text: 'Sudan'},
{ id: 'SR', text: 'Suriname'},
{ id: 'SJ', text: 'Svalbard And Jan Mayen'},
{ id: 'SZ', text: 'Swaziland'},
{ id: 'SE', text: 'Sweden'},
{ id: 'CH', text: 'Switzerland'},
{ id: 'SY', text: 'Syrian Arab Republic'},
{ id: 'TW', text: 'Taiwan'},
{ id: 'TJ', text: 'Tajikistan'},
{ id: 'TZ', text: 'Tanzania'},
{ id: 'TH', text: 'Thailand'},
{ id: 'TL', text: 'Timor-Leste'},
{ id: 'TG', text: 'Togo'},
{ id: 'TK', text: 'Tokelau'},
{ id: 'TO', text: 'Tonga'},
{ id: 'TT', text: 'Trinidad And Tobago'},
{ id: 'TN', text: 'Tunisia'},
{ id: 'TR', text: 'Turkey'},
{ id: 'TM', text: 'Turkmenistan'},
{ id: 'TC', text: 'Turks And Caicos Islands'},
{ id: 'TV', text: 'Tuvalu'},
{ id: 'UG', text: 'Uganda'},
{ id: 'UA', text: 'Ukraine'},
{ id: 'AE', text: 'United Arab Emirates'},
{ id: 'GB', text: 'United Kingdom'},
{ id: 'US', text: 'United States'},
{ id: 'UM', text: 'United States Outlying Islands'},
{ id: 'UY', text: 'Uruguay'},
{ id: 'UZ', text: 'Uzbekistan'},
{ id: 'VU', text: 'Vanuatu'},
{ id: 'VE', text: 'Venezuela'},
{ id: 'VN', text: 'Viet Nam'},
{ id: 'VG', text: 'Virgin Islands}, British'},
{ id: 'VI', text: 'Virgin Islands}, U.S.'},
{ id: 'WF', text: 'Wallis And Futuna'},
{ id: 'EH', text: 'Western Sahara'},
{ id: 'YE', text: 'Yemen'},
{ id: 'ZM', text: 'Zambia'},
{ id: 'ZW', text: 'Zimbabwe'}
];
function formatCountry (country) {
if (!country.id) { return country.text; }
var $country = $(
'<span class="flag-icon flag-icon-'+ country.id.toLowerCase() +' flag-icon-squared"></span>' +
'<span class="flag-text">'+ country.text+"</span>"
);
return $country;
};
//Assuming you have a select element with name country
// e.g. <select name="name"></select>
$("[name='country']").select2({
placeholder: "Select a country",
templateResult: formatCountry,
data: isoCountries
});
});
})(jQuery);
<script>
https://codepen.io/abhishek/pen/bkfLi

dojo.tree has no node persistence

In my ASP.NET project I tried to use some dojo UI elements. My first attempt was a tree like it is shown in the dojo documentation. But the tree refuses to hold the state of the expanded nodes after refreshing the browser page.
require([
"dojo/ready", "dojo/_base/window", "dojo/store/Memory",
"dijit/tree/ObjectStoreModel", "dijit/Tree"
], function (ready, win, Memory, ObjectStoreModel, Tree) {
// Create test store, adding the getChildren() method required by ObjectStoreModel
var myStore = new Memory({
data: [
{ id: 'world', name: 'The earth', type: 'planet', population: '6 billion' },
{ id: 'AF', name: 'Africa', type: 'continent', parent: 'world'
},
{ id: 'EG', name: 'Egypt', type: 'country', parent: 'AF' },
{ id: 'KE', name: 'Kenya', type: 'country', parent: 'AF' },
{ id: 'Nairobi', name: 'Nairobi', type: 'city', parent: 'KE' },
{ id: 'Mombasa', name: 'Mombasa', type: 'city', parent: 'KE' },
{ id: 'SD', name: 'Sudan', type: 'country', parent: 'AF' },
{ id: 'Khartoum', name: 'Khartoum', type: 'city', parent: 'SD' },
{ id: 'AS', name: 'Asia', type: 'continent', parent: 'world' },
{ id: 'CN', name: 'China', type: 'country', parent: 'AS' },
{ id: 'IN', name: 'India', type: 'country', parent: 'AS' },
{ id: 'RU', name: 'Russia', type: 'country', parent: 'AS' },
{ id: 'MN', name: 'Mongolia', type: 'country', parent: 'AS' },
{ id: 'OC', name: 'Oceania', type: 'continent', population: '21 million', parent: 'world' },
{ id: 'EU', name: 'Europe', type: 'continent', parent: 'world' },
{ id: 'DE', name: 'Germany', type: 'country', parent: 'EU' },
{ id: 'FR', name: 'France', type: 'country', parent: 'EU' },
{ id: 'ES', name: 'Spain', type: 'country', parent: 'EU' },
{ id: 'IT', name: 'Italy', type: 'country', parent: 'EU' },
{ id: 'NA', name: 'North America', type: 'continent', parent: 'world' },
{ id: 'SA', name: 'South America', type: 'continent', parent: 'world' }
],
getChildren: function (object) {
return this.query({ parent: object.id });
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: { id: 'world' }
});
// Create the Tree. Note that all widget creation should be inside a dojo.ready().
ready(function () {
var tree = new Tree({
model: myModel,
persist: true
});
tree.placeAt("tree2");
tree.startup();
});
});
</script>
<div id="tree2"></div>
Cookies are activated. I want this to happen just on client side. Tried it with chrome, firefox and IE.

The id for the tree was missing. With id it works:
var tree = new Tree({
id: "yourtree",
model: myModel,
....