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
– Camilo, Commented Apr 13, 2019 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
– FullStackOfPancakes, Commented Apr 13, 2019 at 18:46
The question you linked answers that question, you should try using a for() inside your mounted() function. — Camilo
– Camilo, Commented Apr 13, 2019 at 18:59
@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
– FullStackOfPancakes, Commented Apr 13, 2019 at 19:26

Camilo · Accepted Answer · 2019-04-13 20:51:00Z

2

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.

edited Apr 13, 2019 at 20:51

answered Apr 13, 2019 at 19:39

Camilo

7,3065 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FullStackOfPancakes Over a year ago

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!

Collectives™ on Stack Overflow

Loop through array in vue-chartjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related