Mapeo de arrays en AngularJS
Este artículo tratará sobre el mapeo de arrays en AngularJS.
Array Mapping en AngularJS
El mapeo de arrays es una de las características más valiosas de AngularJS. Le permite crear variables en una sola línea, evitando que declare cada variable por separado.
Simplifica el enlace de datos, mejora el rendimiento y nos permite crear plantillas más fáciles de mantener. Además, el lector puede comprender fácilmente qué valores se asignan y el propósito de la variable en su código.
El mapeo de arrays se realiza utilizando la función map y pasando la matriz como un parámetro junto con otros parámetros como una clave, valor, etc.
Sintaxis:
var myArr = map(myObj);
//myArr = [{key1: "value1", key2: "value2"}, {key3: "value3"}];
Entradas del mapa
A continuación se muestran las entradas del mapa que podemos utilizar.
map.delete()descarta un elemento del mapa.map.size()devuelve el tamaño del mapa.map.clear()elimina los datos del mapa.map.set()añade nuevas entradas.map.get()recupera una entrada del mapa.map.has()determina si existe o no una entrada en el mapa.
Pasos para el mapeo de arrays en AngularJS
Los siguientes pasos lo ayudarán con el mapeo de arrays en AngularJS:
-
Crear un controlador para la página.
-
Crear un array de datos.
-
Agregue una tabla a la página y configúrela con columnas y filas.
-
Agregue código al controlador que recorre cada fila de datos y crea un campo de entrada para cada columna.
-
Crear un objeto literal.
-
Asigne valores a cada clave del objeto literal usando corchetes
[]. -
Crear una función de
mapque asigne valores del objeto literal a nuestro arreglo.
Ejemplo de mapeo de arrays en AngularJS
Veamos un ejemplo de mapeo de matriz angular.
var tags = [{ "id": 1, "name": "Adil" }, { "id": 2, "name": "Steve" }, { "id": 3, "name": "Roman" }, { "id": 4, "name": "John" }]
var selectedTags = [1,2,3];
var tagMap = tags.reduce(function(map, tag) {
map[tag.id] = tag.name;
return map;
}, {});
var selectedArray = selectedTags.map(function(id) {
return tagMap[id];
});
console.log(selectedArray);
Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook