Loop through array in vue-chartjs

Question

I'm working with Laravel 5.7 and have been using vue-chartjs.

Expected outcome:

I want to pass an array to Vue and loop through specific values to dynamically create a chart.

What I've been trying:

I have the following array:

0 => array:4 [▼
  "order_date" => "2019-04-01"
  "days_remaining" => 29
  "cash_remaining" => 26714.63
  "ratio" => "1.11"
]
1 => array:4 [▼
  "order_date" => "2019-04-02"
  "days_remaining" => 28
  "cash_remaining" => 26184.61
  "ratio" => "1.41"
]

I'm passing the array to my Vue component using the :bind shorthand in my blade.

:chart-data="{{ json_encode($array) }}"

I was reading about using a sequential for loop, but whenever I try and add a for loop, I get an Uncaught Error: Module build failed: SyntaxError: Unexpected token (19:11) error.

<script>
import { Line } from 'vue-chartjs' 

export default {
  extends: Line,
  props: ['chartData'],

  mounted() {
    console.log(this.chartData); // This works
    var length = this.chartData.length; // So does this
    
    this.renderChart({
      labels: ['Ratio Value'],

      // This produces the error listed above
      for ( var i = 0; i < length; i++ )
      {
        console.log(chartData[i]);
      }

      datasets: [
        // I want to dynamically produce the following
        {
          label: [chartData.order_date],
          data: chartData.ratio
        }
      ]
    })
  }
}
</script>

The array length is constant at 5, so I could just store their values in hidden inputs in my blade template and make use of document.querySelector, but this seems clunky and not the best route.

Any advice would be extremely appreciated!

Why not loop `this.cartData` from within `mounted()`? I'm not seeing the problem here. — Camilo, Apr 13 '19 at 17:32
Hey @Camilo, first, thanks for the response. That's where I'm struggling - I know I _need_ to loop through the array, I'm just not sure _how_ to do that. Can you post an answer that shows an example? I'm a PHP / Laravel guy - JS is not my strongest suit. — FullStackOfPancakes, Apr 13 '19 at 18:46
The question you linked answers that question, you should try using a `for()` inside your `mounted()` function. — Camilo, Apr 13 '19 at 18:59
Possible duplicate of [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — Camilo, Apr 13 '19 at 19:01
@Camilo - if it answered the question I wouldn't have asked it. Whenever I answer questions on SO I typically give an example so that people can learn. Isn't that the whole point of the site? To share knowledge? — FullStackOfPancakes, Apr 13 '19 at 19:26

Camilo · Accepted Answer · 2019-04-13T20:51:00.427

Move your for() out of the renderChart() call:

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['chartData'],

  mounted() {
    var length = this.chartData.length;
    var array = this.chartData;

    // Create new arrays to store the data
    var ratioArray = [];
    var labelsArray = [];

    for ( var i = 0; i < length; i++ ) {
      // Then push our data to the new arrays
      labelsArray.push(array[i] ? array[i].order_date : '');
      ratioArray.push(array[i] ? array[i].mbr : '');
    }

   this.renderChart({
      labels: labelsArray, // Reference our new labelsArray
      datasets: [
        {
          label: 'Ratio',
          data: ratioArray, // And our new ratioArray
        }
      ]
    })
  }
}

You can't call functions when initializing objects.

I'm going to mark this answer as accepted as you helped to point me down the right path. I edited it to include the component re: pushing the data to new arrays. Thank you very much for your time today, I appreciate it! — FullStackOfPancakes, Apr 13 '19 at 20:08

Loop through array in vue-chartjs

1 Answers1