JSON (JavaScript Object
Notation - Notación de Objetos de JavaScript) es un formato ligero de
intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que
para las máquinas es simple interpretarlo y generarlo.
Está basado en un
subconjunto del Lenguaje de Programación JavaScript, Standard ECMA-262 3rd
Edition - Diciembre 1999. JSON es un formato de texto que es completamente
independiente del lenguaje pero utiliza convenciones que son ampliamente
conocidos por los programadores de la familia de lenguajes C, incluyendo C,
C++, C#, Java, JavaScript, Perl, Python, y muchos otros.
Estas propiedades
hacen que JSON sea un lenguaje ideal para el intercambio de datos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div class="row">
<div class="col-sm-4">
<h1>Lista Vuejs con AJAX </h1>
<ul class="list_group">
<li v-for="item in lists" class="list-group-item">
{{ item.name }} {{ item.username }} {{ item.address.city }}
</li>
</ul>
</div>
<div class="col-sm-8">
<h1> JSON </h1>
<pre>
{{ $data | json }}
</pre>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript">
//https://www.youtube.com/watch?v=yqnT2VzJHHI&ab_channel=RimorsoftOnline video
//var urlUsers='https://randomuser.me/api/ ? resultados = 10';
var urlUsers='https://jsonplaceholder.typicode.com/users';
new Vue({
el: '#main',
created: function() {
this.getUsers();
},
data: {
lists: []
},
methods: {
getUsers: function() {
this.$http.get(urlUsers).then(function(response) {
this.lists=response.data;
});
}
}
});
</script>
</body>
No hay comentarios.:
Publicar un comentario