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
<!DOCTYPE html>
<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"]);
});
}
<body onload="lee_json();">
<div class="logo izquierda"> <img src="images/logo.png">
<input type="text" placeholder="Busqueda">
<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;">
<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 class="logo2 izquierda"> <img src="images/logo.png" /> <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>
luego el codigo en CSS.
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
[
{
"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,