BolUDO: De JSON a JavaScript (utilizando utilizando la función parse)

Habíamos visto que para convertir una cadena que contiene información en formato JSON solo debíamos utilizar la función parse del objeto JSON de JavaScript.

Nos concentraremos nuevamente en como convertir un archivo JSON que viene del servidor y lo debemos convertir a un objeto literal en JavaScript.

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
</head>
<body>
  <h2>Recuperar datos enviados del servidor en formato JSON y luego convertido a objeto literal en el cliente.</h2>
  <br>
  <input type="button" value="Recuperar" id="boton1">
  <div id="resultados"></div>
</body>
</html>

funciones.js

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('boton1');
  ob.addEventListener('click',presionBoton,false);
}

var conexion1;
function presionBoton(e)
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php', true);
  conexion1.send();
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    var datos=JSON.parse(conexion1.responseText);
    var salida='';
    for(var f=0;f<datos.length;f++)
    {
      salida += 'Codigo:'+datos[f].codigo+"<br>";
      salida += 'Descripcion:'+datos[f].descripcion+"<br>";
      salida += 'Precio:'+datos[f].precio+"<br><br>";
    }
    resultados.innerHTML = salida;
  } 
  else 
  {
    resultados.innerHTML = "Cargando...";
  }
}

En la función procesarEventos debemos llamar al método parse del objeto JSON pasando el archivo recuperado del servidor:

    var datos=JSON.parse(conexion1.responseText);

el archivo pagina1.php:

<?php
header('Content-Type: text/txt; charset=utf-8');
$conexion=mysqli_connect("localhost","root","","bdajax") or
    die("Problemas con la conexión");

$registros=mysqli_query($conexion,"select codigo,descripcion,precio from perifericos") or 
  die("Problemas en el select".mysqli_error($conexion));

while ($reg=mysqli_fetch_array($registros))
{
  $vec[]=$reg;
}

$cad=json_encode($vec);
echo $cad;
?>

Problema resuelto.

Se tiene una tabla llamada "perifericos" donde almacenamos el código, descripción y precio de distintos periféricos de computadoras. Generar un archivo JSON en el servidor y proceder a mostrar los datos de los periféricos en el navegador.

pagina1.html

Ejecutar ejemplo

funciones.js

pagina1.php

WEB TRANSLATOR

De JSON a JavaScript (utilizando utilizando la función parse)

23 - De JSON a JavaScript (utilizando utilizando la función parse)

Problema resuelto.

Retornar

COMPÁRTELO:

Síguenos por RSS

Síguenos en las redes sociales

Mis cuentas sociales


Ir al contenido Ir a la navegación Ir al buscador

English Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente Categorías