1

Necesito filtrar una respuesta de una API dependiendo de su id con JavaScript,tengo en html una caja de texto,cuando yo escriba un numero 1 o 2 me lo filtre según el id

Este es mi código

function filtrar(){

const url = 'https://servexusinc.com/api/Model/getTestData';

fetch(url)
    .then(response => response.json())
    .then(data => {

        let element = document.getElementById('element')
        document.getElementById("api").innerHTML = JSON.stringify(data)

        //console.log(data)
    })
    .catch(err => console.log(err))
}
1
  • Edita la pregunta, copia y pega el json en lugar de una imagen representando el json. Será más fácil para la comunidad poder darte un mejor aporte
    – fredyfx
    Commented el 12 feb. 2020 a las 16:29

3 respuestas 3

1

Lo puedes hacer de este modo:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <input id="api" type="text">
      <div id="texto"></div>
    <script>
    
    let busqueda = document.getElementById("api")
    
    function hola(id) {
      busqueda.addEventListener("keyup", () => {
    
          fetch(`https://servexusinc.com/api/Model/getTestData/${id.value}`)
          .then(response => response.json())
          .then(data => {
    
              let element = document.getElementById('element')
              document.getElementById("texto").innerHTML = JSON.stringify(data)
    
              console.log(data)
          })
          .catch(err => console.log(err))
    
    })
    }
      
    hola(busqueda)
    
    
        
    </script>
    </body>
    </html>

Aclaraciones:

  • El input donde el usuario escribirá el identificador y lo asignamos a una variable
  • Obtenemos el div por medio de su id que es donde se pintará la información recueparada
  • Con el uso de backticks encerramos toda la URL y le pasamos de forma dinámica en forma de variable el id que recibe la función
  • Cuando invocamos a la función le pasamos accediendo al atributo value el input donde el usuario escribió el id a recueprar
  • Hacemos uso del evento keyup para detectar cuando el usuario suelta la tecla y así obtener el valor ingresado *Importante invoca a la función al final para que el código haga su trabajo
0

Supongo que element es el input por el que filtras. De no ser así solo tienes que editar element.value por el valor de ese input

Sin arrow function:

var data = [
  {"id":1, "nombre":"Pepe"},
  {"id":2, "nombre":"Luis"},
  {"id":3, "nombre":"Jose"}
];
function filtrar(){
  document.getElementById("element");
  document.getElementById("output").innerHTML= JSON.stringify(data.filter(function(item) {
      return item.id == element.value;
  }));
}
<input type="text" id="element">
<button onclick="filtrar()">Filtrar</button>
<div id="output"></div>

Arrow function:

var data = [
  {"id":1, "nombre":"Pepe"},
  {"id":2, "nombre":"Luis"},
  {"id":3, "nombre":"Jose"}
];
function filtrar(){
  document.getElementById("element");
  document.getElementById("output").innerHTML= JSON.stringify(data.filter(item=> {
      return item.id == element.value;
  }));
}
<input type="text" id="element">
<button onclick="filtrar()">Filtrar</button>
<div id="output"></div>

0

Lo que deberías hacer es convertir ese resultado a un JSON con el método JSON.parse(). Hacemos uso del método find() para que nos devuelva un único valor en base a la condición, en este caso, cuando coincidan los id nos devolverá nuestro objeto con los datos que requerimos.

const form  = document.getElementById('form');
const input = form.getElementsByTagName('input')[0];
// Data de prueba
let data = [
    {id: 1, name: 'Persona 1', edad: 10},
    {id: 2, name: 'Persona 2', edad: 20},
    {id: 3, name: 'Persona 3', edad: 30},
    {id: 4, name: 'Persona 4', edad: 40},
    {id: 5, name: 'Persona 5', edad: 50}
]
// Así recibes la data, una cadena en formato json
data = JSON.stringify(data);

form.addEventListener('submit', function(e) {
    e.preventDefault();

    // Parseamos la data a json 
    let resultados = JSON.parse(data);

    // Obtenemos lo que se introduzca en el input
    let id = input.value;

    // Obtenemos solo el usuario que coincida con el id
    let mi_usuario = resultados.find(
        user => user.id == id
    );
    
    // Mostramos resultados
    console.log(mi_usuario);
});
<form id="form">
    <input type="text">
    <button>Filtrar</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.