How to fetch all data from API files and assign their values to chart?

Question

I am trying to create a bubble chart that is going to show how many comments have been made in the files. However, my API doesn't provide the chunk of the information in one end-point, but it's more like a repository from which I have to fetch data from the different end-points. How should I approach this kind of thing?

const getData = async () => {
    console.log("Processing");
    const request = await fetch("http://25.102.238.73/api/repos/RxJava/");
    const data = await request.json();
    return data;
};

console.log(getData());

var popCanvas = document.getElementById("myChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;


//  y = Line of code in the file
//  x = Line of comments in the file
var popData = {
datasets: [{
    label: ['How many comments have been made in the code?'],
    data: [{
        x:getData(),
        y:getData(),
        r:getData()
    }, 

    ],
    backgroundColor: "#FF9966"
}]
};

var bubbleChart = new Chart(popCanvas, {
type: 'bubble',
data: popData
});
</script>

Answer 1

There are 2 problems in this code.

Problem 1: using async and sync code in one place. Here is an example snippet (for testing I removed fetch, but replaced it with its data, because your fetch is not working in snippet here).

Compare results of DATA1 and DATA2. The first one is sync, the second - async. You can see, that your sync variant is not working. So, you need async (using .then).

const getData = async() => {
  //console.log("Processing");
  //const request = await fetch("http://46.101.95.202/api/repos/RxJava/");
  //const data = await request.json();
  const data = {
    "key": "RxJava", "name": "RxJava", "language": "java",
    "path": "/RxJava_c", "links": { "self": "/api/repos/RxJava/" },
    "contents": [{
        "path": "/RxJava_c/docs", "name": "docs",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/docs"
      },
      {
        "path": "/RxJava_c/gradle", "name": "gradle",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/gradle"
      },
      {
        "path": "/RxJava_c/src", "name": "src",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/src"
      }
    ]};
  return data;
};

console.log("DATA1 =", getData());

getData().then((mydata) => {
  console.log("DATA2 =", mydata);
});

Problem 2: even if we change sync code to be async, the data itself is not suitable for ChartJS. Look:

const getData = async() => {
  //console.log("Processing");
  //const request = await fetch("http://46.101.95.202/api/repos/RxJava/");
  //const data = await request.json();
  const data = {
    "key": "RxJava", "name": "RxJava", "language": "java",
    "path": "/RxJava_c", "links": { "self": "/api/repos/RxJava/" },
    "contents": [{
        "path": "/RxJava_c/docs", "name": "docs",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/docs"
      },
      {
        "path": "/RxJava_c/gradle", "name": "gradle",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/gradle"
      },
      {
        "path": "/RxJava_c/src", "name": "src",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/src"
      }
    ]};
  return data;
};

getData().then((mydata) => {
  //console.log(mydata);

  var popCanvas = document.getElementById("myChart");

  Chart.defaults.global.defaultFontFamily = "Lato";
  Chart.defaults.global.defaultFontSize = 18;

  //  y = Line of code in the file
  //  x = Line of comments in the file
  var popData = {
    datasets: [{
      label: ['How many comments have been made in the code?'],
      data: [{
          x: mydata,
          y: mydata,
          r: mydata
        },

      ],
      backgroundColor: "#FF9966"
    }]
  };

  var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData
  });
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart">