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
    Commented 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
    Commented el 7 oct. 2022 a las 10:06
  • Ok @padaleiana, Commented 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. Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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