0
124
VistasIterando sobre los datos recibidos de ajax/json
A continuación se muestra el tipo de datos que obtengo a través de ajax.
[{"model": "blogapp.articles", "pk": 1, "fields": {"title": "Rainbow Buildings in Tokyo", "slug": "Rainbow-Buildings-in-Tokyo"}}, {"model": "blogapp.articles", "pk": 2, "fields": {"title": "4 Cool Cube Facades", "slug": "4-Cool-Cube-Facades"}}] 
¿Cómo puedo iterar sobre estos datos usando .each para obtener el título y el slug para cada entrada?
El siguiente código me da un error de sintaxis en los datos.
app.js
$(document).ready(function () { $(".tag-nav-links").on("click", function (e) { e.stopPropagation(); return $.ajax({ type: "POST", url: "", dataType: "json", data: { filter: `${e.target.textContent}` }, success: function (data) { var html = ""; $(data).each(function (index, value) { html += "<h4>{{" + value.title + "}}</h4>"; }); $("trial").append(html); }, }); }); });1 Respuestas
Responde la pregunta0
La función jQuery (que está usando así: $(data) ) no es lo que quiere allí. (Es posible que haya querido decir $.each(data, ...) , pero en estos días no es necesario). Si data realmente son una matriz como se muestra, simplemente use el map en él, luego una el resultado con una cadena en blanco:
success: function (data) { $("trial").append(data.map(value => { return "<h4>{{" + value.fields.title + "]]</h4>"; }).join("")); }, Si data son realmente como se muestran en la captura de pantalla, entonces es un objeto con una propiedad data que contiene una cadena de JSON. Probablemente sea una configuración incorrecta o un error de codificación en el servidor, actualmente está devolviendo un texto como este:
{"data":"[{\"model\": \"blogapp.articles\", \"pk\": 1,...cuando debería estar devolviendo algo como esto:
{"data":[{"model":"blogapp.articles","pk":1,... Algo está encadenando previamente los datos antes de pasarlos a lo que sea que los envuelva en el envoltorio {"data": ___} , los encadena y los devuelve.
Hasta/a menos que lo arregles, tendrás que analizarlo dos veces. jQuery está haciendo uno de esos por usted, pero tendrá que hacer el segundo, después de lo cual debería poder usar la matriz:
// Until/unless the server is fixed success: function (data) { data = JSON.parse(data.data); // *** Second parse $("trial").append(data.map(value => { return "<h4>{{" + value.fields.title + "]]</h4>"; }).join("")); }, Si arregla el servidor para que no tenga doble cadena, usaría data.data en su lugar (dado data es el nombre de su parámetro y se refiere a un objeto con una propiedad data que tiene la matriz que desea usar):
// After the server is fixed success: function (data) { $("trial").append(data.data.map(value => { // ^^^^^^^^^ return "<h4>{{" + value.fields.title + "]]</h4>"; }).join("")); },