0

Recibo de una consulta api request un JSON con el siguiente formato:

[{"idTipo":1,"Tipo":"Refugio juvenil"},{"idTipo":2,"Tipo":"AlbergueJuvenil_Hostel"},{"idTipo":3,"Tipo":"Apto._ApartHotel_Suite"},{"idTipo":4,"Tipo":"Coleg.Mayor/ Resid.Estudiantes"},{"idTipo":5,"Tipo":"Hostal"},{"idTipo":6,"Tipo":"Pensión"},{"idTipo":7,"Tipo":"Hotel"},{"idTipo":9,"Tipo":"Rural"},{"idTipo":10,"Tipo":"Camping"},{"idTipo":11,"Tipo":"Aloj. para extranjeros"},{"idTipo":12,"Tipo":"Consignas"}]

¿Cómo puedo hacer para darle estilo a esa respuesta con css o html? PD: va implementada en una plantilla de joomla.

4
  • 1
    A un JSON no se le puede aplicar estilo css.
    – Yussef
    el 7 oct. 2022 a las 4:43
  • @Cris223511.dev asegurate de corregir todos los errores que encuentres en la pregunta (de redacción, de formato, etc) al hacer una edición.
    – padaleiana
    el 7 oct. 2022 a las 10:06
  • Ok @padaleiana, el 7 oct. 2022 a las 13:09
  • @Yussef quizás se refiere a una respuesta JSON en html darle estilos, y esto si se puede, o quizás mejorar las vistas de un JSON, esto se puede con extensiones de google. el 7 oct. 2022 a las 13:10

1 respuesta 1

1

Para mostrar una lista JSON en HTML y darle estilo con CSS, se puede usar forEach para recorrer todos los items del Array, y luego crear la lista HTML dentro del backtick `` y mostrar los items del la lista del JSON en ella.

Para entender mejor, lee los comentarios

            
            let datos = [
{
"idTipo":1,
"Tipo":"Refugio juvenil"
},{
"idTipo":2,
"Tipo":"AlbergueJuvenil_Hostel"
},{
"idTipo":3,
"Tipo":"Apto._ApartHotel_Suite"
},{
"idTipo":4,
"Tipo":"Coleg.Mayor/ Resid.Estudiantes"
},{
"idTipo":5,
"Tipo":"Hostal"
},{
"idTipo":6,
"Tipo":"Pensión"
},{
"idTipo":7,
"Tipo":"Hotel"
},{
"idTipo":9,
"Tipo":"Rural"
},{
"idTipo":10,
"Tipo":"Camping"
},{
"idTipo":11,
"Tipo":"Aloj. para extranjeros"
},{
"idTipo":12,
"Tipo":"Consignas"
}
];

// se guarda la lista
dat = "";

// con forEach recooro la lista de datos
datos.forEach(function(item) {

 // += para ir agragando los items
 // con ${item.} escribo un item en el html 
 dat += `
  <span class="item"> <b>${item.idTipo}</b> ${item.Tipo} </span> 
 `;
})

// selecciono el div demo para escribir dat
document.querySelector(".demo").innerHTML = dat;
            
            body {
font-size: 16px;
font-family: sans-serif;
}

.demo {
display: flex;
flex-direction: column
}

.item {
color: red
}

.item b {
font-weight: bold;
color: #000
}

            
            
<div class="demo"></div>

            

Luego de esto ya se puede modificar como quieras el contenido.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.