consultar Json mediante javascript

Diegox04 · 9 Diciembre 2018, 18:47 PM

Hola amigos,
tengo un problema que nose como solucionar, necesito consultar un archivo Json desde una pagina en html con javascript pero no lo logro, es para un proyecto.

dejo aqui el codigo que estoy usando en Html

Código (html5) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<title>Inventario General </title>
	<link rel="stylesheet" type="text/css" href="estilo.css">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">

        function lee_json() {
            $.getJSON("c:/datos.json", function(datos) {
                alert(datos["Serie"]);
                console.add(datos["Serie"]);
            });
        }
    </script>

</head>


<body onload="lee_json();">

	<header id="encabezado">
		<div id="mainheader" >
			<div class="logo izquierda">
				<img src="images/logo.png">
			</div>
		</div>

		<div id="busqueda">    
                <input type="text" placeholder="Busqueda">
        </div>
	</header>

	<div class="clear"></div>

	<aside id="contenido">
		<div>
				<input type="text" placeholder="Serie" style="float: left;margin-left:40px; margin-bottom: 20px;">
				<input type="text" placeholder="Nombre de equipo" style="margin-left:100px;" >
				<input type="text" placeholder="Activo" style=" margin-left:100px;">
				<input type="text" placeholder="Modelo" style="margin-left:100px;">
				<input type="text" placeholder="Ubicacion" style="margin-left:100px;">
				<div class="clear"></div>

				<input type="text" placeholder="Persona responsable" style="float: left;margin-left:40px; margin-bottom: 20px;">
				<input type="text" placeholder="Departamento" style="margin-left:100px;">
				<input type="text" placeholder="Expiracion" style="margin-left:100px;">
				<input type="text" placeholder="Sistema Operativo" style="margin-left:100px;">
				<input type="text" placeholder="Descripcion" style="margin-left:100px;">
				
		</div>
	
	</aside>


	<aside id="final">
		<div class="logo2 izquierda">
			<img src="images/logo.png" />
		</div>
		<div class="botones">	
			<p><button id="modificar" onclick="valida()" style="border: 1px solid black; margin: 10px;" >Modificar</button></p>
			<p><button id="agregar" onclick="valida()" style="border: 1px solid black; margin: 10px;">Agregar</button></p>
			<p><button id="eliminar" onclick="valida()" style="border: 1px solid black; margin: 10px;;">Eliminar</button></p>
			<p><button id="atras" onclick="valida()" style="border: 1px solid black; margin: 10px;;">Atras</button></p>
			<p><button id="siguiente" onclick="valida()" style="border: 1px solid black; margin: 10px;">Siguiente</button></p>
		</div>
		
	</aside>
</body>
</html>

luego el codigo en CSS.

Código (css) [Seleccionar]

body{
	/* Elimina borde por defecto del navegador */
	margin:0;
	padding: 0;
	font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.clear{ /*limpia los margenes*/
	margin:0;
	padding: 0;
	height: 0;
	clear: both;
}
.izquierda{ /*acomoda lo que deseo al lado izquierdo del elemento deseado*/
	float: left;
}

.derecha{ /*acomoda lo que deseo al lado derecho del elemento deseado*/
	float: right;
}
#busqueda{/*acomoda el cuadro de busqueda*/
	float: right;
	width: 210px;
    margin-right: 160px;
    margin-top: 35px;
    
}

#encabezado{ /*edita la parte superior de la pagina*/
	height:80px;
	background-color:#c3c3c3;
}
.logo img{ /*ajusta el logo del encabezado al tamaño y posicion que deseo*/
	width: 250px;
    margin-left: 160px;
    margin-top: 0px;
}

#contenido{ /*edita todo el cuadro del contenido*/
    height: 360px;
    background-position: center;
    padding: 47px;
    border: 1px solid black; 
}


#final{ /*edita la parte inferior de la pagina*/
    margin-top:0px;
    background-color:#c3c3c3;
    height: -10px;
    background-position: center;
    padding: 50px;
}
.logo2 img{ /*ajusta el logo del final al tamaño y posicion que deseo*/
	width: 200px;
    margin-left: -20px;
    margin-top: -40px;
}
.botones{
	display:flex;
	margin: -30px auto;
	width: 60%;
}

y por ultimo el Json

Código (javascript) [Seleccionar]

[
	{
		"Serie1": "5CG53446JS",
		"Nombre de equipo": "PAN2146JSL",
		"activo": "646",
		"Modelo": " HP ProBook 640 G1",
		"Ubicación": "Panamá",
		"Persona responsable": " Aida Medina",
		"Departamento": "21",
		"Expiracion": "29/08/2015",
		"Sistema Operativo": "W10 ENT x64",
		"Descripcion": "prueba"
	},
	{
		"Serie": "5CG50936BF",
		"Nombre de equipo": "CR3036BFL",
		"activo": "556",
		"Modelo": " HP ProBook 640 G1",
		"Ubicación": "Evertec Tournon",
		"Persona responsable": "Aaron Cordoba",
		"Departamento": "30",
		"Expiracion": "11/03/2015",
		"Sistema Operativo": "W10 ENT x64",
		"Descripcion": "prueba1"
	},
	{
		"Serie": "5CG50936BF",
		"Nombre de equipo": "CR3036BFL",
		"activo": "556",
		"Modelo": " HP ProBook 640 G1",
		"Ubicación": "Evertec Tournon",
		"Persona responsable": "diego",
		"Departamento": "30",
		"Expiracion": "11/03/2015",
		"Sistema Operativo": "W10 ENT x64",
		"Descripcion": "prueba1"
	},
	{
		"Serie": "5CG50936BF",
		"Nombre de equipo": "CR3036BFL",
		"activo": "556",
		"Modelo": " HP ProBook 640 G1",
		"Ubicación": "Evertec Tournon",
		"Persona responsable": "Steven",
		"Departamento": "30",
		"Expiracion": "11/03/2015",
		"Sistema Operativo": "W10 ENT x64",
		"Descripcion": "prueba1"
	},
	{
		"Serie": "5CG50936BF",
		"Nombre de equipo": "CR3036BFL",
		"activo": "556",
		"Modelo": " HP ProBook 640 G1",
		"Ubicación": "Evertec Tournon",
		"Persona responsable": "ale",
		"Departamento": "30",
		"Expiracion": "11/03/2015",
		"Sistema Operativo": "W10 ENT x64",
		"Descripcion": "prueba1"
	},
	{
		"Serie": ""
	}
]

estoy tratando de al menos hacer la conexion con el archivo que lance una alerta pero en consola me muestra el siguiente error

jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/datos.json'; from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

gracias de antemano, soy principiante y me gustaria un poco de ayuda.

Saludos,

#!drvy · 9 Diciembre 2018, 19:32 PM

El CORS es la política de mismo origen de los navegadores que previene que puedas ejecutar datos/acciones en sitios ajenos sin permiso. Tu problema se resume en que estas intentando leer un archivo en una dirección a la cual no tienes permiso. En esos casos, te interesa que el JSON este en una ruta relativa a la que puedas acceder (al lado del fichero html por ejemplo) o que el usuario te de permiso explicito para leerlo (mediante un file input).

En resumidas cuentas, la solución más facil es que pongas el .json al lado del .html y lo llames así:

Código (javascript) [Seleccionar]

<script type="text/javascript">
    function lee_json() {
        $.getJSON("datos.json", function(datos) {
            alert(datos["Serie"]);
            console.add(datos["Serie"]);
        });
    }
</script>

https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS

Saludos

Diegox04 · 9 Diciembre 2018, 20:03 PM

amigo ya puse el Json en la ruta donde se encuentra el html pero me aparece el siguiente error con Google chrome

jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/Diego/Desktop/Inventario/datos.json'; from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
send @ jquery.min.js:2

y con mozilla me muestra este error desde la consola:

La codificación de caracteres del documento HTML no ha sido declarada. El documento se mostrará con texto "basura" en algunas configuraciones de navegador si el documento contiene caracteres externos al rango US-ASCII. La codificación de caracteres de la página debe ser declarada en el documento o en el protocolo de transferencia. inventario.html
Error de lectura XML: error de sintaxis
Ubicación: file:///C:/Users/Diego/Desktop/Inventario/datos.json
Número de línea 1, columna 1: datos.json:1:1

el script utilizado fue este:

Código [Seleccionar]

<script type="text/javascript">
    function lee_json() {
        $.getJSON("datos.json", function(datos) {
            alert(datos["Serie"]);
            console.log(datos["Serie"]);
        });
    }
</script>

Saludos,

Test Foro de elhacker.net SMF 2.1

consultar Json mediante javascript

Diegox04

#!drvy

Diegox04