cómo usar el archivo json en el código html

Tengo el archivo json mydata.json, y en este archivo hay algunos datos json-encoded.cómo usar el archivo json en el código html

Quiero obtener esta información en el archivo index.html y procesar esta información en JavaScript. ¿Pero no sé cómo conectar el archivo .json en el archivo .html?

Dime por favor. Aquí es mi JSON archivo:

{ 
    "items": [ 
     { 
      "movieID": "65086", 
      "title": "The Woman in Black", 
      "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg" 
     }, 
     { 
      "movieID": "76726", 
      "title": "Chronicle", 
      "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg" 
     } 
    ] 
}

pensando que estoy recibiendo archivo JSON desde el servidor, cómo utilizar ese archivo en mi html, por lo que puedo mostrar los datos en las tablas de página HTML. Estoy usando JavaScript para analizar el archivo json. Soy nuevo en este campo. Ayuda por favor

Fuente

2012-08-22 saikiran

Hola, usted podría considerar la adición de más detalles a su pregunta. ¿Estás usando algún framework de JavaScript? (es decir: jQuery) ¿Qué has intentado ya? ¿Cuál es el resultado final deseado? ¡Una buena pregunta con un objetivo claro ayudará a obtener buenas respuestas y ejemplos de la comunidad! Use el enlace 'editar' debajo de su pregunta para revisarlo. – BenSwayne

eche un vistazo en el enlace que también proporciona los ejemplos también http://api.jquery.com/jQuery.getJSON/ –

No puedo obtener el ejemplo. Por favor, ejecútelo ... – saikiran

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> 

<script> 

    $(function() { 


    var people = []; 

    $.getJSON('people.json', function(data) { 
     $.each(data.person, function(i, f) { 
      var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
      "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>" 
      $(tblRow).appendTo("#userdata tbody"); 
    }); 

    }); 

}); 
</script> 
</head> 

<body> 

<div class="wrapper"> 
<div class="profile"> 
    <table id= "userdata" border="2"> 
    <thead> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      <th>City</th> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 

</div> 
</div> 

</body> 
</html>

{ 
    "person": [ 
     { 
      "firstName": "Clark", 
      "lastName": "Kent", 
      "job": "Reporter", 
      "roll": 20 
     }, 
     { 
      "firstName": "Bruce", 
      "lastName": "Wayne", 
      "job": "Playboy", 
      "roll": 30 
     }, 
     { 
      "firstName": "Peter", 
      "lastName": "Parker", 
      "job": "Photographer", 
      "roll": 40 
     } 
    ] 
}

I Got tuvo éxito en integratig un archivo JSON a html mesa después de un día de trabajo en él !!!

Fuente

2012-08-23 12:03:36 saikiran

¿y si es un archivo json local? –

people.json es local json solamente. dé la url absoluta de su json local a $ .getJSON – saikiran

el uso de mi archivo JSON jQuery $.getJSON

$.getJSON('mydata.json', function(data) { 
    //do stuff with your data here 
});

Fuente

2012-08-23 05:19:51

cómo vincular el jquery en mi archivo html ... ¡ayúdenme! quiero un código completo Quiero mostrar mis datos en una tabla en mi página html. dar un código de muestra. entonces puedo entender fácilmente agradeciendo de antemano. – saikiran

gracias tengo mi respuesta ... – saikiran

Puede utilizar JavaScript como ... acaba de dar el camino correcto 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 conseguir los datos y añadiéndolos a una div ... Inicialmente la impresión de la longitud en alerta.

Aquí está mi archivo JSON: abc.json

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';

Fuente

2017-07-31 19:53:57 javed

que abc.json no es un archivo json válido, su javascript real, por lo que aquí solo está llamando a un archivo javascript "abc.json" y lo está cargando ... –

If Si desea cargar una matriz en una variable de JavaScript de este "JSON", puede eliminar las comillas simples externas. En este caso, 'data' sería una matriz que contiene objetos con una propiedad' name'. No es necesario 'JSON.parse()' en este caso. –

cómo usar el archivo json en el código html

Respuesta

Cuestiones relacionadas