Cómo recorrer un complejo árbol JSON de objetos y matrices en JavaScript

¡Hay algunas formas de recorrer las propiedades de objetos de JavaScript!

¡He encontrado 3 formas! Si prefieres un video de una explicación, ¡acabo de crearlo!

El objeto para recorrer

Primero necesitamos un objeto de ejemplo para recorrer. ¡Entonces puse algo de mi experiencia en ello (jajaja)! ¡Mantén la diversión dentro!

deje que experienceObject = {
nombre: ‘Raymon’,
título: ‘Lead Frontend / JavaScript Developer’,
años de experiencia: 8,
proyectos: [
{
nombre: ‘Empresa A’,
título: ‘Desarrollador JavaScript Senior’,
técnicas: [‘Angular’, ‘ES6’, ‘Vanilla JavaScript’, ‘Less’, ‘CSS’]
},
{
nombre: ‘Empresa B’,
título: ‘Desarrollador JavaScript principal’,
técnicas: [‘Angular 2’, ‘AngularJS’, ‘ES6’, ‘Vanilla JavaScript’, ‘Web Sockets’, ‘D3’]
},
{
nombre: ‘Empresa C’,
título: ‘Desarrollador Frontend Senior’,
técnicas: [‘Vanilla JavaScript’, ‘CSS’, ‘Responsive Webdesign’]
}
]
}

Object.keys (objeto)

El método Object.keys () devolverá una matriz de claves. Si coloca esto en una variable y lo coloca en console.log (), verá una matriz de claves.

var objectKeys = Object.keys (experienceObject);
console.log (‘objectKeys:’, objectKeys);

Object.keys (experienceObject) .map ()

Con el método Object.keys.map vamos a recorrer el Array que ha devuelto Objec.keys. El método de mapa es una de las formas de JavaScript para recorrer una matriz.

El método de mapa es una de las formas de JavaScript para recorrer una matriz.

console.log (‘======= Object.keys ==========’);
Object.keys (experienceObject) .map (e => {
console.log (`clave = $ {e} valor = $ {experienceObject [e]}`)
});

Object.entries (objeto)

El método Object.keys () devolverá una matriz de claves. Si coloca esto en una variable y lo coloca en console.log (), verá una matriz de claves.

var objectEntries = entradas (experienceObject);
console.log (‘objectEntries:’, objectEntries);

Object.entries (experienceObject) .forEach ()

Con el método Object.keys.forEach vamos a recorrer la matriz de pares clave-valor que Object.entries ha devuelto.

En este caso, usamos el método forEach para recorrer la matriz. El forEach es otro método simple para recorrer una matriz en lugar del ciclo for.

console.log (‘======= Object.entries ==========’);
Object.entries (experienceObject) .forEach (([clave, valor]) => {
console.log (`clave = $ {clave} valor = $ {valor}`)
})

Bucle de entrada

El último ejemplo es el bucle For-in para recorrer las propiedades del Object it.

El bucle for-in es mucho más simple que el bucle for-in.

para (propiedad en experienceObject) {
console.log (`clave = $ {propiedad} valor = $ {experienciaObjeto [propiedad]}`)
}

Verifique la demostración con el código que se ejecuta aquí: archivo Parse Json en Jquery Ajax

Datos de archivo Json

[

{

"alignment1": "TM"

},

{

"alignment2": "TLBR"

},

{

"alignment3": "BL"

},

{

"ruleTimer": "6"

},

{

"music": "Enable"

},

{

"rule1": "Rule 1"

},

{

"rule2": "Rule 2"

},

{

"rule3": "Rule 3"

},

{

"rule4": "Rule 4"

},

{

"ID1": "p7ZsBPK656s"

},

{

"name1": "Disfigure - Blank [NCS Release]"

},

{

"ID2": "__CRWE-L45k"

},

{

"name2": "Electro-Light - Symbolism [NCS Release]"

},

{

"ID3": "J2X5mJ3HDYE"

},

{

"name3": "DEAF KEV - Invincible [NCS Release]"

},

{

"color1": ""

},

{

"color2": ""

},

{

"color3": ""

},

{

"color4": ""

},

{

"color5": ""

}

]

Código Index.html




Cómo analizar un archivo JSON usando jQuery


Abrir archivo JSON



// después de hacer clic en el botón, descargamos los datos
$ ('. button'). click (function () {
// iniciar solicitud ajax
$ .ajax ({
url: "data.json",
// obliga a manejarlo como texto
dataType: "texto",
éxito: función (datos) {

// datos descargados, por lo que llamamos a la función parseJSON
// y pasa los datos descargados
var json = $ .parseJSON (datos);
// ahora la variable json contiene datos en formato json
// vamos a mostrar algunos itemscons
console.log ("datos son -" + json);

// $ .each (json, function (idx, obj) {

//$.each(obj, function (idx, obj) {
//console.log("one-"+obj+ "" + idx);
// $ ('# resultados'). append ("" + obj + ": -" + idx + "

");
//});
//});
función iterar (datos)
{
jQuery.each (datos, función (índice, valor) {
if (typeof value == 'objeto') {
// alert ("Objeto" + índice);
Iterar (valor);
}
más {
alerta (índice + ":" + valor);
$ ('# resultados'). append ("" + index + ": -" + value + "

");
}
});
};
Iterar (json);

// $ ('# resultados'). html ('Nombre del complemento:' + json.alignment1);
}
});
});
});

Le recomiendo aprovechar las bibliotecas funcionales como Underscore.js, ya que le permitirá atravesar objetos JSON con bastante facilidad. Especialmente cuando se trata de encadenar funciones y entrar en una programación más funcional, manteniendo las cosas claras y legibles.

Por ejemplo, uso lo siguiente en mis scripts de compilación Grunt:

Dado un archivo JSON de asignaciones de archivos de compilación en el formato de:

{
“Nombre del grupo”: {
“opciones”: {“srcDir”: “src / .build / app”},
“archivos”: {
“public / app / app.js”: [
“app.module.js”, …
]
}
}
}

Y usando guión bajo, puedo aplanar grupos en matrices de archivos para ser concatenados con el campo ‘srcDir’ del grupo dado:

_.chain (asignaciones) .mapObject (función (v) {
var srcDir = v.options.srcDir;
var newEntry = {};

_.each (v.files, function (filesArr, fileKey) {
newEntry [fileKey] = _.map (filesArr, function (filePath) {return path.join (srcDir, filePath);});
});

return newEntry;
})
.valores()
// map devuelve una matriz poco profunda, por lo que debemos aplanarla y unir todos los valores
.reduce (function (memo, v) {return _.extend (v, memo);})
.valor()

Lo que quieres es una rutina transversal del árbol . Debido a las peculiaridades de JavaScript, debe tratar los tres tipos principales de “cosas” de JavaScript (objetos, matrices, valores primitivos) de manera diferente. Aquí hay una función transversal simple que acepta cualquier árbol de objetos de JavaScript y lo atraviesa, imprimiendo una vista con sangría del árbol:

función transversal (x, nivel) {
if (isArray (x)) {
traverseArray (x, nivel);
} else if ((typeof x === ‘objeto’) && (x! == null)) {
traverseObject (x, nivel);
} más {
console.log (nivel + x);
}
}

La función isArray (o) {
return Object.prototype.toString.call (o) === ‘[matriz de objetos]’;
}

función traverseArray (arr, nivel) {
console.log (nivel + ““);
arr.forEach (función (x) {
transversal (x, nivel + “”);
});
}

función traverseObject (obj, nivel) {
console.log (nivel + ““);
para (clave var en obj) {
if (obj.hasOwnProperty (clave)) {
console.log (nivel + “” + tecla + “:”);
traverse (obj [clave], nivel + “”);
}
}
}

Este es un ejemplo de recorrido en profundidad primero (hay otros tipos). Para usar, simplemente reemplace las llamadas de console.log() con código “real”.

Puedo sugerir utilizar la iteración de propiedades recursivas.

Ejemplo grosero:

Object.prototype.iterate = function () {
var iter = función (que) {
para (propiedad var en eso) {
if (typeof (that [property])! == ‘function’) {
console.log (esa [propiedad]);
if (!! that [property] && typeof (that [property]) === ‘object’) {
iter (esa [propiedad]);
}
}
}
}
iter (esto);
}

Llamando en método prototipo:
yourObject.iterate();

Los motores JavaScript compatibles con ES5 ya ofrecen todo lo que necesita para atravesar y manipular objetos grandes obtenidos mediante el análisis JSON.

En particular, las funciones de orden superior que se encuentran comúnmente en el prototipo de Array seguramente serán útiles: para Cada , mapear , filtrar y reducir , entre otras.

Se pueden encontrar otras funciones útiles en el constructor de objetos, como las teclas .

El MDN mantiene una extensa documentación de todas estas cosas, sugiero encarecidamente que le eche un buen vistazo.

Otra alternativa es emplear bibliotecas de terceros, que generalmente exponen una API mucho más grande, lo que le brinda muchas más utilidades; Lodash es bueno, aunque mi preferencia va hacia Ramda , siendo puramente funcional y perezosa.

https://lodash.com/
http://ramdajs.com

Grandes respuestas !!

Sin embargo, quiero intervenir en todo el complejo árbol JSON. Creo que si encuentra que su JSON se está volviendo demasiado complejo para analizar, generalmente es una señal de que puede necesitar repensar la estructura en sí. En mi experiencia, JSON más plano siempre es más rápido y fácil de tratar. Otra forma de pensar en esto es que: será mucho más rápido para el analizador analizar una estructura de nodo simple que una estructura compleja. Por lo tanto, la pregunta es si tiene sentido o no mantener una estructura compleja con el riesgo de agregar más tiempo de carga (no importa cuán pequeña sea la diferencia).

Una matriz es un grupo de variables de tipo similar o similar a las que se hace referencia con un nombre común. Se puede crear cualquier tipo de matriz y puede tener una o más dimensiones. El índice de matriz se usa para acceder a cualquier elemento específico. Usar la matriz es más conveniente ya que ayuda a agrupar información relacionada.

Matrices En Java

Usted no

Utilice la función de JavaScript JSON.parse ()

More Interesting

Aprendí C y ahora quiero crear un sitio web como la forma más simple de Twitter usando Python. ¿Qué libros de Python me recomendarías?

¿Cómo se construye una API?

Cómo construir la interfaz del menú para un juego

Quiero crear una aplicación a gran escala usando PHP. ¿Cuál es el mejor marco para trabajar con PHP?

Conozco a algunos programadores que prefieren programar antes que realizar actividades realmente divertidas como ver películas y programas de televisión o incluso salir. No entiendo cómo es eso posible. ¿Cómo se puede explicar esto?

Quiero construir un blog personal. ¿Qué es un servidor barato?

Obtuve mi primer trabajo como desarrollador de PHP (Laravel). ¿Qué más debo aprender para seguir siendo atractivo en el futuro mercado laboral?

Estoy construyendo una API RESTful usando ExpressJs. ¿Cómo dejo que solo acepte solicitudes de mi Front-End?

Cómo configurar una estación para un equipo de desarrolladores

¿Cómo obtengo exactamente datos de películas como títulos, clasificaciones, actores, etc., de IMDb?

Quiero ser un desarrollador web de backend. ¿Puedo saltearme saltear HTML, CSS y JavaScript?

Cómo obtener las publicaciones más recientes de Craigslist

Quiero comenzar un lenguaje de programación web en C. ¿Qué debo hacer?

¿Soy terco al no querer aprender bootstrap y jQuery, sino aprender la fuente, CSS y JavaScript?

Tengo todas las habilidades necesarias para crear aplicaciones de software web a gran escala. También soy muy introvertido y encuentro que sentarme en una oficina es totalmente agotador. ¿Cuál es la mejor manera de abordar la situación?