ejemplo - JSON+Javascript/jQuery. ¿Cómo importar datos de un archivo json y analizarlos?
string to json javascript (6)
En el código jQuery, debe tener la propiedad de los employees .
data.employees[0].firstName
Así sería como esto.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.getJSON("names.json", function(data) {
console.log(data);
$(''body'').append(data.employees[0].firstName);
});
</script>
</body>
</html>
Por supuesto, también necesitará esa propiedad para la versión no jQuery, pero primero deberá analizar la respuesta JSON.
También tenga en cuenta que document.write está destruyendo toda su página.
Si aún tiene problemas, pruebe la solicitud completa de $.ajax lugar del envoltorio $.getJSON .
$.ajax({
url: "names.json",
dataType: "json",
success: function(data) {
console.log(data);
$(''body'').append(data.employees[0].firstName);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(''ERROR'', textStatus, errorThrown);
}
});
Si tengo un archivo JSON llamado names.json con:
{"employees":[
{"firstName":"Anna","lastName":"Meyers"},
{"firstName":"Betty","lastName":"Layers"},
{"firstName":"Carl","lastName":"Louis"},
]}
¿Cómo puedo usar su contenido en javascript?
Sé que la respuesta se dio hace mucho tiempo, pero este resultado se muestra en primera posición en google.
Sin embargo, no quiero usar jquery, así que en vanilla JS, encontré este tutorial rápido más limpio que la respuesta del senor de prueba (también permite cargar archivos según una variable):
function loadJSON(filelocation, callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open(''GET'', filelocation, true); // Replace ''my_data'' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
function init() {
var location = "myfile.json";
loadJSON(filelocation=location, function(response) {
// Parse JSON string into object
loadedJSON = JSON.parse(response);
console.log(loadedJSON.somethingsomething);
});
}
init();
y en su archivo html:
`<script src="myscript.js"></script>`
Si quieres usar PHP.
<?php
$contents = file_get_contents(''names.json'');
?>
<script>
var names = <?php echo $contents; ?>
var obj = JSON.parse(names);
//use obj
</script>
Opcionalmente, utilízalo async:
<script>
$(document).ready(function(){
$.get("get_json.php?file=names",function(obj){
//use obj here
},''json'');
});
</script>
El PHP:
<?php
$filename = $_GET[''file''] . ''.json'';
$data[''contents''] = file_get_contents($filename);
echo json_encode($data);
?>
Simplemente puede incluir un archivo Javascript en su HTML que declare su objeto JSON como una variable. Luego, puede acceder a sus datos JSON desde su ámbito de JavaScript global utilizando data.employees , por ejemplo.
index.html:
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js:
var data = {
"employees": [{
"firstName": "Anna",
"lastName": "Meyers"
}, {
"firstName": "Betty",
"lastName": "Layers"
}, {
"firstName": "Carl",
"lastName": "Louis"
}]
}
Su archivo JSON no contiene JSON válido. Intente lo siguiente en su lugar.
{
"employees":
[
{
"firstName": "Anna",
"lastName": "Meyers"
},
{
"firstName": "Betty",
"lastName": "Layers"
},
{
"firstName": "Carl",
"lastName": "Louis"
}
]
}
Entonces deberías ver una respuesta. Echa un vistazo a http://jsonlint.com/
Un ejemplo de cómo hacer esto podría ser:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON(''names.json'',function(data){
console.log(''success'');
$.each(data.employees,function(i,emp){
$(''ul'').append(''<li>''+emp.firstName+'' ''+emp.lastName+''</li>'');
});
}).error(function(){
console.log(''error'');
});
});
</script>
</head>
<body>
<ul></ul>
</body>
</html>