0

Necesito centrar un archivo json.Soy muy principiante.Ya probre con center pero no me funciona.

 

{ "1": "HTML - CSS", "2": "JavaScript", "3": "GitHub - GitHub Desktop", "4": "Visual Studio Code", "5": "JQuery", "6": "Telerik - Kendo UI", "7": "Angular - Kendo UI", "8": "VUE - Kendo UI", "9": "REACT - Kendo UI"}

Leer JSon $.getJSON("cache/test.json", function( data ) { var items = []; $.each( data, function( key, val ) { items.push( "" + val + "" ); }); $( "", { "class": "my-new-list", html: items.join( "" ) }).appendTo( "body" ); });

Siempre me queda de un lado izquierdo.

1

1 respuesta 1

1

Hola si lo que quieres es presentar el json en el html centrado al ancho, esto te puede servir: Cuando tengas el json recorrelo for(var key in tuJson) como objeto y ve formando un html en una variable, cuando tengas todo el html entonces por id encuentra el contenedor y inserta|agrega el html, para centrarlo a dicho contenedor agregale estilos para centrarlo display: flex; justify-content: center;

Con JQuery

var jsonData = { "1": "HTML - CSS", "2": "JavaScript", "3": "GitHub - GitHub Desktop", "4": "Visual Studio Code", "5": "JQuery", "6": "Telerik - Kendo UI", "7": "Angular - Kendo UI", "8": "VUE - Kendo UI", "9": "REACT - Kendo UI"};
//al leer el documento
$(document).ready(function () {
var _jsonString = "{"+ '</br>';

// Recorre el json cada llave y valor y damos un salto de linea para el formato.
for(var key in jsonData){
  _jsonString +=key+":"+" "+jsonData[key]+ '</br>';
}
_jsonString +="}"

//Obtenemos por id el contenedor donde se mostrará el json con formato.
$("#show-data").append(_jsonString)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="show-data" style="width: 100%; display: flex; justify-content: center;"></div>
</body>

Solo javascript:

var jsonData = { "1": "HTML - CSS", "2": "JavaScript", "3": "GitHub - GitHub Desktop", "4": "Visual Studio Code", "5": "JQuery", "6": "Telerik - Kendo UI", "7": "Angular - Kendo UI", "8": "VUE - Kendo UI", "9": "REACT - Kendo UI"};

var _jsonString = "{"+ '</br>';

// Recorre el json cada llave y valor y damos un salto de linea para el formato.
for(var key in jsonData){
  _jsonString +=key+":"+" "+jsonData[key]+ '</br>';
}
_jsonString +="}"
//Obtenemos por id el contenedor donde se mostrará el json con formato.
document.getElementById('show-data').insertAdjacentHTML("beforeend",_jsonString);
<body>
<div id="show-data" style="width: 100%; display: flex; justify-content: center;"></div>
</body>

1
  • 1
    Gracias por reponder! Lo voy a probar! Commented el 23 nov. 2020 a las 21:10

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.