dojo.map¶
| Status: | Draft |
|---|---|
| Version: | 1.2 |
Examples¶
This example shows you how to use dojo.map with a simple array. All values of the array will get doubled:
<script type="text/javascript">
dojo.require("dijit.form.Button"); // this is just to make the demo look nicer
var arrValues = [1,2,3,4,5,6,7,8,9,10]
function mapArray(){
var doubleValue = dojo.map(arrValues, function(item){
return item*2;
});
dojo.forEach(doubleValue, function(item){
var li = dojo.doc.createElement("li");
li.innerHTML = item;
dojo.byId("arrValuesAfter-items").appendChild(li);
});
dojo.forEach(arrValues, function(item){
var li = dojo.doc.createElement("li");
li.innerHTML = item;
dojo.byId("arrValues-items").appendChild(li);
});
}
</script>
<button dojoType="dijit.form.Button" onClick="mapArray()">Run dojo.map()</button>
<div style="width: 300px; float: left; margin-top: 10px;">
Values before running dojo.map()
<ul id="arrValues-items">
</ul>
</div>
<div style="width: 300px; float: left; margin-top: 10px;">
Values after running dojo.map()
<ul id="arrValuesAfter-items">
</ul>
</div>
This example shows you how to use dojo.map with objects. In JavaScript, objects are references, so you can not just change a value of a property without modifying the object itself. Luckily Dojo provides you with a method to clone objects: dojo.clone
<script type="text/javascript">
dojo.require("dijit.form.Button"); // this is just to make the demo look nicer
var arrSalary = [{surname: "Washington", name: "Paul", salary: 200},
{surname: "Gordon", name: "Amie", salary: 350},
{surname: "Meyer", name: "Sofie", salary: 100},
{surname: "Jaysons", name: "Josh", salary: 2500},
{surname: "Washington", name: "George", salary: 10},
{surname: "Doormat", name: "Amber", salary: 320},
{surname: "Smith", name: "Susan", salary: 3200},
{surname: "Hill", name: "Strawberry", salary: 290},
{surname: "Washington", name: "Dan", salary: 200},
{surname: "Dojo", name: "Master", salary: 205}];
function raiseSalary(){
var raisedSalaries = dojo.map(arrSalary, function(item){
var newItem = dojo.clone(item);
newItem.salary += (newItem.salary/100)*10;
return newItem;
});
dojo.forEach(raisedSalaries, function(item, i){
var li = dojo.doc.createElement("li");
li.innerHTML = i+1+". "+item.surname+", "+item.name+". New salary: "+item.salary;
dojo.byId("filteredSalary-items").appendChild(li);
});
dojo.forEach(arrSalary, function(item, i){
var li = dojo.doc.createElement("li");
li.innerHTML = i+1+". "+item.surname+", "+item.name+". Old salary: "+item.salary;
dojo.byId("unFilteredSalary-items").appendChild(li);
});
}
</script>
<button dojoType="dijit.form.Button" onClick="raiseSalary()">Raise the salary</button>
<div style="width: 300px; float: left; margin-top: 10px;">
Peoples salaries after raise:
<ul id="filteredSalary-items">
</ul>
</div>
<div style="width: 300px; float: left; margin-top: 10px;">
Peoples salaries before raise:
<ul id="unFilteredSalary-items">
</ul>
</div>