Fetching - HappyPantss/frontend-data GitHub Wiki

RDW data

With help from modules, I'm loading the links to the datasets into my project. The code in config.js looks like:

export const overviewUrl = 'https://npropendata.rdw.nl/parkingdata/v2/'
export const dataSource1 = 'https://opendata.rdw.nl/resource/qidm-7mkf.json' // Open Data Parkeren: GEBRUIKSDOEL
export const dataSource2 = 'https://opendata.rdw.nl/resource/6wzd-evwu.json' // GEO PenR
export const proxyUrl = 'https://cors-anywhere.herokuapp.com/' // CORS
export const selectedColumn = 'startdataarea'
export const selectedColumn2 = 'usageid'

In my script.js I import them by using the following code:

import {
  dataSource1,
  dataSource2,
  proxyUrl,
  selectedColumn,
} from './config.js';

For collecting the data, I fetched the url's. The Fetch API provides an interface for fetching resources. I had to use this, because I use a local HTTP server. Which I start up by typing npm run start or py -m http.server in my console. After that I can visit localhost:8000 in my browser, and I can see my live project.

In the next code I am fetching the data to json so I can use the urls from the datasets.

// Fetch the data to json
async function getData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

After fetching, I can get the data from de dataset (dataSource2 / GEO PenR). In the same code, I am counting all years that are in the dataset, and add them together to see how many the year counts.

// Get data from dataSource 2 (GEO PenR) and count all the years in the array
getData(dataSource2).then((RDWData) => {
  // console.log("all data: ", RDWData)
  const locationArray = filterData(RDWData, selectedColumn);
  console.log('All location data', locationArray);
  
  // Thanks to @Razpudding / Laurens
  let aantalPerJaarArray = [];
  locationArray.forEach((jaar) => {
    // if the array includes a empty value, change it to 0
    // else make a new array with all the years + number of values
    if (aantalPerJaarArray.find((item) => item.year == jaar) == undefined) {
      aantalPerJaarArray.push({
        year: jaar,
        value: 0,
      });
    }
    // Count for every found item 1 to the value
    aantalPerJaarArray.find((item) => item.year == jaar).value += 1;
  });
  // Unique values
  const uniqueAreaValues = listUnique(locationArray);
  console.log('Unique area values:', uniqueAreaValues);
  
  makePieChart(aantalPerJaarArray);
});