0
168
ViewsSolicitud AJAX de no recibir la propiedad que quiero
Tengo que enviar una solicitud AJAX a la siguiente API: https://jsonplaceholder.typicode.com/posts . y luego ordenar el resultado por el atributo "título" (orden ascendente) e imprimir por console.log
El problema aquí es que no obtengo el atributo de título, sino que obtengo mucho de esto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <h1>Getting Started With Fetch API</h1> <button id="fetchJsonData">Fetch User Data</button> </div> <hr> <div id="response"></div> </body> <script> document.getElementById('fetchJsonData').addEventListener('click', fetchJson); function fetchJson(){ fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => console.log(json)) } document.getElementById('fetchJsonData').addEventListener('click', fetchJson); function fetchJson(){ fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(titles => { let output = '<h2>Lists of Titles</h2>'; // output += '<ul>'; titles.forEach(function(titles) { output += ` <li> ${titles} </li> `; output += '</ul>' document.getElementById("response").innerHTML = output; }); }); } function sortList(ul) { var ul = document.getElementById(ul); Array.from(ul.getElementsByTagName("LI")) .sort((a, b) => a.textContent.localeCompare(b.textContent)) .forEach(li => ul.appendChild(li)); } sortList("response"); </script> </html>¿Estoy accediendo a los datos de forma incorrecta? por favor consejo, gracias de antemano
·
Santiago Trujillo
3 answers
Answer question0
En el ciclo forEach, ${titles} debe ser ${titles.title}
·
Santiago Trujillo
Report
0
La respuesta es una matriz de objetos, debe obtener el valor de cadena del título si desea representarlo directamente.
document.getElementById('fetchJsonData').addEventListener('click', fetchJson); function fetchJson() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => console.log(json)) } document.getElementById('fetchJsonData').addEventListener('click', fetchJson); function fetchJson() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(titles => { let output = '<h2>Lists of Titles</h2>'; output += '<ul>'; titles.sort((a, b) => a.title.localeCompare(b.title)).forEach((obj) => { output += `<li>${obj.title}</li>`; }); output += '</ul>'; document.getElementById("response").innerHTML = output; }); } <div> <h1>Getting Started With Fetch API</h1> <button id="fetchJsonData">Fetch User Data</button> </div> <hr> <div id="response"></div>
·
Santiago Trujillo
Report
0
Haz esto de esta manera.
Lea los documentos para obtener más información javascript.
document.getElementById('fetchJsonData') .addEventListener('click', fetchJson); function fetchJson(){ fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(posts => { let output = '<h2>Lists of Titles</h2>'; posts.sort((a, b) => a.title.localeCompare(b.title)); posts.forEach(function(post) { output += ` <li> ${post.title} </li> `; output += '</ul>' document.getElementById("response").innerHTML = output; }); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <h1>Getting Started With Fetch API</h1> <button id="fetchJsonData">Fetch User Data</button> </div> <hr> <div id="response"></div> </body> </html>
·
Santiago Trujillo
Report
Answer question