From f1cbf0f6bd4d912424118e7542109824d158bb61 Mon Sep 17 00:00:00 2001 From: Wocanilo <25706428+Wocanilo@users.noreply.github.com> Date: Mon, 10 Feb 2020 15:54:20 +0100 Subject: [PATCH] fix(learn): warn about XSS in convert JSON to HTML (#37037) Co-authored-by: RedOpsMe <57320352+RedOpsMe@users.noreply.github.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> --- .../json-apis-and-ajax/convert-json-data-to-html.spanish.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/curriculum/challenges/spanish/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.spanish.md b/curriculum/challenges/spanish/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.spanish.md index 98d8af3bfc..348cd3e4ce 100644 --- a/curriculum/challenges/spanish/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.spanish.md +++ b/curriculum/challenges/spanish/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.spanish.md @@ -9,6 +9,8 @@ localeTitle: Convertir datos JSON a HTML ## Description
Ahora que está obteniendo datos de una API JSON, puede mostrarlos en el HTML. Puede usar un método forEach para recorrer los datos, ya que los objetos de la foto del gato se mantienen en una matriz. A medida que llegas a cada elemento, puedes modificar los elementos HTML. Primero, declare una variable html con var html = ""; . Luego, recorra el JSON, agregando HTML a la variable que envuelve los nombres de las claves en etiquetas strong , seguido del valor. Cuando el bucle termina, lo renderizas. Aquí está el código que hace esto:
json.forEach (función (val) {
var keys = Object.keys (val);
html + = "<div class = 'cat'>";
keys.forEach (function (key) {
html + = "<strong>" + clave + "</strong>:" + val [clave] + "<br>";
});
html + = "</div> <br>";
});
+Nota: Para completar este reto es necesario añadir nuevos elementos HTML, por lo que no podrá depender de `textContent`. Deberá utilizar el método `innerHTML` que podría hacer que su página web sea vulnerable a ataques de cross site scripting. + ## Instructions
Agregue un método forEach para recorrer los datos JSON y crear los elementos HTML para mostrarlos. Aquí hay un ejemplo de JSON
El
{
"id": 0,
"imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
"altText": "Un gato blanco con un casco verde con forma de melón en la cabeza".
"codeNames": ["Juggernaut", "Mrs. Wallace", "Buttercup"
]
}
]