Estoy tratando de pasar datos de una API de matraz a chart.js. Estamos usando D3 para hacer la llamada a la API:
var queryUrl = "http://127.0.0.1:5000/api/1/GenderOverTime"; var searchResults = []; d3.json(queryUrl).then(function (chart_data) { searchResults = chart_data;}); setTimeout(function(){init()},50)
Esta es la sección en la que nos encontramos con un error:
function init(){ console.log("searchResults: ", searchResults); let selector = d3.select("#selDataset"); let options = [] filtered_data_for_chart = searchResults.filter(result=>{ if (!options.includes(result.Sport)){ options.push(result.Sport) selector .append("option") .text(result.Sport) .property("value", result.Sport); } return result.Sport==="Gymnastics" });
Al ejecutar init()
, obtenemos "ChartJSfile.js:14 TypeError no detectado: searchResults.filter no es una función".
Antes de usar una API, teníamos otra secuencia de comandos js con exactamente los mismos datos guardados como un objeto de matriz, y el gráfico y el filtro funcionaban bien.
setTimeout
para dar tiempo a obtener los datos, ya que init() se estaba ejecutando antes de cargar los datos en la matriz.
muestra de los datos:
[{ "_id": { "$oid": "61589a22cd5cc36ad5fc8898" }, "Sport": "Aeronautics", "Year": 1936, "Sex": "M", "Name": 1, "Bronze": 0, "Silver": 0, "Gold": 1, "No Win": 0, "Attempts": 1, "Wins": 1 },... ]
Puede usar Array.from()
para crear una nueva instancia de Array de copia superficial a partir de un objeto iterable o similar a una matriz. Así que esto debería resolver tu problema:
const searchResultsList = Array.from(searchResults) filtered_data_for_chart = searchResultsList.filter(result=>{...})
Su código parece funcionar correctamente como puede ver aquí
Es posible que desee refactorizarlo para asegurarse de tener acceso a los datos en los resultados de búsqueda cuando los necesite:
var queryUrl = "http://127.0.0.1:5000/api/1/GenderOverTime"; var searchResults = []; d3.json(queryUrl).then(function (chart_data) { searchResults = chart_data; init(searchResults); }); function init(results) { console.log("searchResults: ", results); let selector = d3.select("#selDataset"); let options = []; filtered_data_for_chart = results.filter((result) => { if (!options.includes(result.Sport)) { options.push(result.Sport); selector .append("option") .text(result.Sport) .property("value", result.Sport); } return result.Sport === "Gymnastics"; }); }