在 Chart.js 中显示 JSON

Question

I'm fetching and parsing JSON data from a local file and I'm using Chart.js to display the data. The data I want to be displayed is the number of times a given word is used and the word as the chart label.

Issues:

I've managed to get the word and occurrence pair within the wordCount function. If I log out counts , I can see the match. What I'm having a pain point with is how to properly display the data with what I have so far. I'm seeing some of it displayed, but it isn't correct.

Code:

var ctx = document.getElementById('myChart').getContext('2d');
const tweets = []
const counts = {}
const keyz = []

// Fetch JSON file locally and return the data
fetch('../test_feed.json')
  .then(res => res.json())
  .then(data => {
    handleTweetText(data)
    compare()
    wordCount()
    createChart()
  })
.catch(err => console.error(err));

function handleTweetText(data) {
  for (var i = 0; i < data.content.length; i++) {
    const tweetHtml = data.content[i].content.bodyHtml;

    // If tweet exists, return it
    if(tweetHtml && tweetHtml != '') {
      // Regex to grab entire anchor tag
      const regEx = /<a(\s[^>]*)?>.*?<\/a>/ig
      // Replace anchor with empty string and remove empty space
      const splitTweetText = tweetHtml.replace(regEx, '').trim()
      tweets.push(splitTweetText)
    }
  }
}

function wordCount() {
  const allWords = tweets.join('\n')
  const tokens = allWords.split(/\W+/)

  for (let i = 0; i < tokens.length; i++) {
    var word = tokens[i].toLowerCase()

    if (counts[word] === undefined) {
      counts[word] = 1 
      keyz.push(word)
    } else {
      counts[word] = counts[word] + 1
    }
  }  

}

// sort word occurrence 
keyz.sort(compare)

function compare(a ,b,) {
  const countA = counts[a]
  const countB = counts[b]
  return countB - countA
}

// Chart
function createChart() {
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: keyz,
      datasets: [{
          label: 'Word Count',
          data: keyz,
          backgroundColor: [
              'rgba(255, 99, 132, 0.2)'
          ],
          borderWidth: 1
      }]
  }
})}

The labels fiels and data field within the datasets are where I need to place my paired data.

I've been working at this for awhile now with no luck.

Answer 1

for one, fetch is asynchronous, so you have to wait for it to finish.
which is why you have then methods.

however, you're trying to sort keyz before keyz has any data.

move the sort function into the then method,
after wordCount where keyz is filled.
and calling compare on its own, does nothing...

// Fetch JSON file locally and return the data
fetch('../test_feed.json')
  .then(res => res.json())
  .then(data => {
    handleTweetText(data)
    wordCount()
    keyz.sort(compare)
    createChart()
  })
.catch(err => console.error(err));

but typically, you don't use the same data for both labels and data in the chart.
is it possible you meant to use counts for data in the chart?