Ciao a tutti! mi sto apprestando a fare questa challenge, la mia domanda è visto il link che date per svolgere l’esercizio, volevo chiedere se dal link stesso posso estrapolare l’array annidato che contiene i dati da analizzare, in modo da svolgere il progetto un po a modo mio e in modo un po diverso dal vostro esempio di soluzione che è come sempre molto complesso. l array contenuto nel link che volevo usare ‘‘singolarmente’’ e usare si chiama “data”. Spero di essermi fatto capire
Ciao a tutti, ho capito che il mio approccio era totalmente sbagliato, non avevo ancora studiato la teoria sui json! Comunque sia questa challenge mi sta creando problemi, questo è il mio codice, (mi sono aiutato dal vostro nel vostro esempio)
document.addEventListener("DOMContentLoaded", () => {
fetch("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json")
.then( resp => resp.json())
.then( jsonData => {
const w = 1000
const h = 600
const padding = 50
const barWidth = w / jsonData.data.length
const yearDates = jsonData.data.map( item => {
return new Date(item[0])
})
const xScale = d3.scaleTime()
.domain([d3.min(yearDates), d3.max(yearDates)])
.range([padding, w - padding])
const yScale = d3.scaleLinear()
.domain([0, d3.max(jsonData.data, d => d[1])])
.range([h-padding, padding])
const svg = d3.select("#graph")
.append("svg")
.style("height", h)
.style("width", w)
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
let gdpScale = jsonData.data.map( d => yScale(d[1]) )
.style("width", "200px")
svg.append("g")
.attr("id", "x-axis")
.attr("transform", "translate(0,"+ (h - padding) +")")
.call(xAxis)
svg.append("g")
.attr("id", "y-axis")
.attr("transform", "translate("+ padding +",0)")
.call(yAxis)
svg.selectAll("rect")
.data(gdpScale)
.enter()
.append("rect")
.attr("class", "bar")
.attr("data-date", (d,i) => jsonData.data[i][0])
.attr("data-gdp", (d, i) => jsonData.data[i][1])
.attr("width", barWidth)
.attr("y", d => d)
.attr("height", d => h - d - padding )
.attr("x", (d, i) => xScale(yearDates[i]))
.attr('fill', 'blue')
}
)})
il problema (tra i tanti) è che quando faccio console.log(jsonData.data) mi da errore! ora probabilmente saranno più le cose sbagliate che quelle giuste in questo codice, ma vi chiedo di aiutarmi di più col json, vorrei farlo stampare nella console prima di tutto in modo da essere sicuro che lo script lo carica.
Hey, non ci vedo nulla di sbagliato nel fetch e nei callback. Dovresti essere in grado di stampare in console jsonData.
In ogni caso sei stato molto vago, quando chiedi aiuto è sempre meglio essere precisi: hai una demo che si puo provare cosi da capire meglio l’errore?
Parli di errore "quando faccio console.log(jsonData.data) ", ma non lo vedo nel codice, quindi è molto dura indovinare.
In ogni caso quando si parla di operazioni asincrone, che potrebbero fallire per n motivi, è sempre meglio pensare anche a cosa fare in caso di errore.
Le Promise hanno un metodo catch che ti consiglio di implementare.
fetch("...").then(_ => {}).catch(error => console.error("Oh Oh! ",error))
Spero ti aiuti.
Happy coding 
1 Like
Si il console.log(jsonData) l avevo scritto ma non l’ho implementato qui nel forum! Comq ok grazie dell’aiuto capito!