guardar - leer json de php en javascript
¿Cómo puedo obtener javascript para leer desde un archivo.json? (4)
AVISO: A PARTIR DEL 12 DE JULIO DE 2018, LAS OTRAS RESPUESTAS ESTÁN ACTUALIZADAS. JSONP SE CONSIDERA AHORA UNA IDEA TERRIBLE
Si tiene su JSON como una cadena, JSON.parse() funcionará bien. Dado que está cargando el archivo json desde un archivo, deberá realizar una solicitud XMLHttpRequest. Por ejemplo (este es el ejemplo de w3schools.com):
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
<!DOCTYPE html>
<html>
<body>
<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>
<p id="demo"></p>
<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>
No funcionará aquí ya que el archivo no se encuentra aquí. Vaya a este ejemplo de w3schools, sin embargo: https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax
Aquí está la documentación para JSON.parse (): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
Aquí hay un resumen:
El método JSON.parse () analiza una cadena JSON, construyendo el valor u objeto de JavaScript descrito por la cadena. Se puede proporcionar una función reviver opcional para realizar una transformación en el objeto resultante antes de que se devuelva.
Aquí está el ejemplo utilizado:
var json = ''{"result":true, "count":42}'';
obj = JSON.parse(json);
console.log(obj.count);
// expected output: 42
console.log(obj.result);
// expected output: true
Aquí hay un resumen sobre XMLHttpRequests de https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest :
Use objetos XMLHttpRequest (XHR) para interactuar con los servidores. Puede recuperar datos de una URL sin tener que hacer una actualización completa de la página. Esto permite que una página web actualice solo una parte de la página sin interrumpir lo que el usuario está haciendo. XMLHttpRequest se usa mucho en la programación Ajax.
Si no quiere usar XMLHttpRequests, entonces una forma JQUERY (que no estoy seguro de por qué no le funciona) es http://api.jquery.com/jQuery.getJSON/
Como no funciona, intentaría usar XMLHttpRequests
También puedes probar las solicitudes de AJAX:
$.ajax({
''async'': false,
''global'': false,
''url'': "/jsonfile.json",
''dataType'': "json",
''success'': function (data) {
// do stuff with data
}
});
Documentación: http://api.jquery.com/jquery.ajax/
Mi script actualmente se ve así:
<script type="text/javascript">
function updateMe(){
var x = 0;
var jsonstr = ''{"date":"July 4th", "event":"Independence Day"}'';
var activity=JSON.parse(jsonstr);
while(x<10){
date = document.getElementById("date"+x).innerHTML = activity.date;
event = document.getElementById("event"+x).innerHTML = activity.event;
x++;
}
}
</script>
Donde la fecha "x" y el evento "x" son una serie de etiquetas html. Esta función se ejecuta cuando se carga la página (onload). Mi objetivo es hacer exactamente lo mismo, solo desde un archivo .json local, en lugar del código duro que tengo arriba. Ya he revisado http://api.jquery.com/jQuery.getJSON/ .
El archivo .json local se ve así:
{"date":"July 4th", "event":"Independence Day"}
¿Alguna sugerencia?
En realidad, está buscando el AJAX CALL, en el que reemplazará el valor del parámetro de URL con el enlace del archivo JSON para obtener los valores de JSON.
$.ajax({
url: "File.json", //the path of the file is replaced by File.json
dataType: "json",
success: function (response) {
console.log(response); //it will return the json array
}
});
Suponiendo que quiere decir "archivo en un sistema de archivos local" cuando dice el archivo .json.
Deberá guardar los datos json formateados como jsonp, y usar un file:// url para acceder a ellos.
Tu HTML se verá así:
<script src="file://c://data//activity.jsonp"></script>
<script type="text/javascript">
function updateMe(){
var x = 0;
var activity=jsonstr;
foreach (i in activity) {
date = document.getElementById(i.date).innerHTML = activity.date;
event = document.getElementById(i.event).innerHTML = activity.event;
}
}
</script>
Y el archivo c: / data / activity.jsonp contiene la siguiente línea:
jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ];
Puede hacerlo como ... Simplemente indique la ruta correcta de su archivo json ...
<!doctype html>
<html>
<head>
<script type="text/javascript" src="abc.json"></script>
<script type="text/javascript" >
function load() {
var mydata = JSON.parse(data);
alert(mydata.length);
var div = document.getElementById(''data'');
for(var i = 0;i < mydata.length; i++)
{
div.innerHTML = div.innerHTML + "<p class=''inner'' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
}
}
</script>
</head>
<body onload="load()">
<div id= "data">
</div>
</body>
</html>
Simplemente obteniendo los datos y adjuntándolos a un div ... Inicialmente imprimiendo la longitud en alerta.
Aquí está mi archivo Json: abc.json
data = ''[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]'';