如何計算arraylist中的項目數

Question

我想計算 arraylist 中的項目數以使用 chart.js 在圖表中顯示它

這就是我目前的做法，但我無法計算它。

const dataArray = [];
let labelsArray = ['1 - Very Jialat', '2 - Jialat', '3 - Normal lor', '4 - Shiok a bit', '5 - Shiok ah '];
db.collection('Feedback Ratings').get().then((snapshot => {
  snapshot.docs.forEach(doc => {
    FeebackRatings = doc.data().response;

    let response = FeebackRatings.response;
    dataArray.push(FeebackRatings);

    // loop through the data array
    dataArray.forEach(response => {
      // -1 because if value is 1, i want to refer to index 0 of the array
      if (dataArray[response - 1]) {
        dataArray[response - 1] = dataArray[response - 1] += 1
      }
      if (!dataArray[response - 1]) {
        dataArray[response - 1] = 1
      }
    })
  })
}));

// expected outcome = [2, 1, 1] --- where first item in index represents the count of the item
console.log(dataArray);

let myChart = document.getElementById('myChart').getContext('2d');

let BarChart = new Chart(myChart, {
  type: 'pie', //can create diff types using this; bar, horizontal, pie, line, donut, radar
  data: {
    labels: labelsArray,
    datasets: [{
      label: 'Total number',
      data: dataArray,
      backgroundColor: 'pink'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Feedback Statistics',
      fontSize: 25
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet"/>
<canvas id="myChart"></canvas>

Answer 1

如果是JS數組，就用

dataArray.length

Answer 2

您正在編寫.then() ，所以我猜您可能正在處理一個承諾。 如果你正在處理一個承諾，承諾之后的代碼將在 .then() 中的代碼執行之前執行。 所以可能需要這樣做。

1) 將需要執行的代碼轉換成函數

function displayChart(dataArray){
console.log(dataArray);

let myChart = document.getElementById('myChart').getContext('2d');

let BarChart = new Chart(myChart, {
  type: 'pie', //can create diff types using this; bar, horizontal, pie, line, donut, radar
  data: {
    labels: labelsArray,
    datasets: [{
      label: 'Total number',
      data: dataArray,
      backgroundColor: 'pink'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Feedback Statistics',
      fontSize: 25
        }
      }
    });

}

2) 並在 then () 方法的 then 結束時調用此函數。

const dataArray = [0, 0, 0, 0, 0];
let labelsArray = ['1 - Very Jialat', '2 - Jialat', '3 - Normal lor', '4 - Shiok a bit', '5 - Shiok ah '];
db.collection('Feedback Ratings').get().then(snapshot => {
    snapshot.docs.forEach(doc => {
        FeebackRatings = doc.data().response;

        let response = FeebackRatings.response;


        // loop through the data array
        response.forEach(response, => {
            labelsArray.forEach((value, index) => {
                if (value == response) {
                    dataArray[index]++;
                }

            });

        })
    })
    displayChart(dataArray);
});