Etiqueta: json

Fetch + JSON + API + BD typicode

<div id="contenedor" class="container ">
		<button id="recuperar" class="btn btn-success">Recuperar</button>
		<div id="usuarios"></div>
	</div>
	<script src="js/test.js"></script>

document.getElementById('recuperar').addEventListener('click', recuperar)

function recuperar () {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      console.log(html)
      const resultado = JSON.parse(html)
      console.log(resultado)
      for (let i = 0; i < resultado.length; i++) {
        const usuario = document.createElement('p')
        usuario.innerHTML = resultado[i].name
        document.getElementById('usuarios').appendChild(usuario)
      }
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}

fetch + JSON + API: Cartas

<div id="contenedor" class="container ">
		<button id="empezar" class="btn btn-success">Empezar</button>
		<p id="mensaje"></p>
		<button id="carta" class="btn btn-success">Sacar una carta</button>
		<button id="carta5" class="btn btn-success">Sacar cinco cartas</button>

		<div id="cartas"></div>
	</div>
	<script src="js/test.js"></script>

document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', carta)
document.getElementById('carta5').addEventListener('click', cartas)

let baraja

function carta () {
  fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=1')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      console.log(html)
      const resultado = JSON.parse(html)
      console.log(resultado)
      const imagen = document.createElement('img')
      imagen.src = resultado.cards[0].image
      document.getElementById('cartas').appendChild(imagen)
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}
function empezar () {
  fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      console.log(html)
      const resultado = JSON.parse(html)
      console.log(resultado)
      baraja = resultado.deck_id
      document.getElementById('mensaje').innerHTML = 'Tienes la baraja: ' + baraja
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}
function cartas () {
  fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=5')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      const resultado = JSON.parse(html)
      for (let i = 0; i < resultado.cards.length; i++) {
        const imagen = document.createElement('img')
        imagen.src = resultado.cards[i].image
        document.getElementById('cartas').appendChild(imagen)
      }
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}

Fetch + Json ejemplo bitcoin

	<div id="contenedor" class="container ">
		<h1>Hoy el bitcoin está a <span id="cotizacion"></span></h1>
		Cuantos bitcoins tienes: <input type="number" id="bitcoins" value="0">
		<button id="calcular">Calcular</button>
		<h3>Tienes: <span id="cartera"></span> €</h3>
	</div>
	<script src="js/test.js"></script>

document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
    .then(function (response) { // Si tengo respuesta
      return response.text() // El html de la página me lo pasas al siguiente then
    })
    .then(function (html) { // Dentro de html yo tengo la respuesta de la página
      console.log(html)
      const objeto = JSON.parse(html)
      console.log(objeto)
      console.log(objeto.bpi.EUR.rate)
      const cantidad = parseFloat(document.getElementById('bitcoins').value)
      document.getElementById('cotizacion').innerHTML = objeto.bpi.EUR.rate
      document.getElementById('cartera').innerHTML = objeto.bpi.EUR.rate_float * cantidad
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}

Mini ejercicio JSON

Vamos a tener una web con dos cajitas:
Num1:[___] Num2:[___]
[Calcular]

El botón calcular nos calcula la suma y guarda en el localStorage un elemento llamado ‘resultado’ que es un objeto con la siguiente info:
{
num1: (valor del numero1),
num2: (valor del numero2),
suma: (valor de la suma)
}

No hace falta hacer nada más: recuperar, calcular, guardar en localStorage


	Num1: <input type="number" id="numInput1">
	Num2: <input type="number" id="num2">
	<button id="calcular">Calcular</button>
	<script src="js/local.js"></script>

document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  const numero1 = parseFloat(document.getElementById('numInput1').value)
  const num2 = parseFloat(document.getElementById('num2').value)
  console.log(numero1, num2)
  const suma = numero1 + num2
  // Creo el objeto
  const resultado = {
	  num1: numero1,
	  num2: num2, // Si estás poniendo lo mismo 'num2' ¿Esto no da un error? No, porque en la parte izquierda es el NOMBRE de la propiedad y en la derecha es el VALOR de la variable
	  suma: suma // Yo recomiendo que los nombres sean los mismos en todo el recorrido, nos evita errores
  }
  console.log(resultado)
  // Lo guardo convertido en JSON
  localStorage.setItem('resultado', JSON.stringify(resultado))
}

Ejemplo JSON

 

<div id="contenedor" class="container ">
		Nombre:<input type="text" id="nombre">
		Edad:<input type="text" id="edad">
		Sueldo:<input type="number" id="sueldo">
		<button id="guardar" class="btn btn-success">Guardar datos</button>
	</div>
	<script src="js/test.js"></script>

document.getElementById('guardar').addEventListener('click', guardar)

// Recupero el valor del localStorage
const guardado = localStorage.getItem('empleado')
// SI hay datos
if (guardado != null) {
  console.log(guardado)
  // Convierto la cadena en objeto (parse)
  const empleado = JSON.parse(guardado)
  console.log(empleado)
  // Pongo los datos en el HTML
  document.getElementById('nombre').value = empleado.nombre
  document.getElementById('edad').value = empleado.edad
  document.getElementById('sueldo').value = empleado.sueldo
}

function guardar () {
  // Recupero los datos del HTML
  const nombre = document.getElementById('nombre').value
  const edad = document.getElementById('edad').value
  const sueldo = document.getElementById('sueldo').value
  // Creo un objeto con esos datos
  const empleado = {
    nombre: nombre,
    sueldo: sueldo,
    edad: edad
  }
  // Lo convierto a cadena (stringify) y lo guardo en el localStorage
  localStorage.setItem('empleado', JSON.stringify(empleado))
}

See the Pen
qBqjOYz by Juan Pablo Fuentes (@juan-pablo-fuentes)
on CodePen.

Intercambio de datos con JSON

Página ciudades PHP:

<?php
include "bd.php";
$pais = filter_input(INPUT_GET, 'pais');
$sql = "select * from city where country_id=" . $pais;
$ciudades = getSqlRows($sql);
echo json_encode($ciudades);

Página html:

 $('#paises').change(function () {
                    $.get('ciudades.php?pais=' + $(this).val(), function (data, status) {
                        var ciudades = JSON.parse(data);

                        $("#ciudades option").remove();

                        for (var d in ciudades) {

                            $('#ciudades').append($('', {
                                value: ciudades[d].city_id,
                                text: ciudades[d].city
                            }));
                        }
                    });
                });

Necesitaré tener lo siguiente:

 <select id="paises">
 <option value="0">Seleccione un país...</option>
 <?php
 foreach ($paises as $pais) {
 ?>
 <option value="<?= $pais['country_id'] ?>"><?= $pais['country'] ?></option>
 <?php
 }
 ?>
 </select>
 <select id="ciudades"><option value="0">Seleccione un país para ver sus ciudades</option></select>