HMTL Code:

<div class="col-xl-12 col-lg-7">
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">Evolution of Names vs Dates</h6>
            <div class="dropdown no-arrow">
            </div>
        </div>
        <div class="card-body">
            <div class="container-fluid">
                <canvas id="food_items_line_chart"></canvas>
            </div>
        </div>
    </div>
</div>

Javascript Code:

<script>
 $(document).ready(function () {

  var ctx = $("#my_line_chart");

  var names2 = ['name1', 'name2'];

  var colors2 = ['orange', 'blue'];

  var data2 = [[10,20],[20,30]];

  var dates2 = ['2020-01', '2020-02'];

  var data =
  {
    labels: dates2,
    datasets :
    [
        for (let i = 0; i <= data.length; i++)
        {
            {
                label: names2[i],
                data: data2[i],
                borderColor:
                [
                colors2[i],
                ],
                borderWidth : 1
            },
        }
    ]
  };

  var options = {
    title : {
      display : false,
      position : "top",
      fontSize : 18,
      fontColor : "#111"
    },
    legend : {
      display : true
    },
    scales : {
      yAxes : [{
        ticks : {
          min : 0
        }
      }]
    }
  };

  var chart = new Chart( ctx, {
    type : "line",
    data : data,
    options : options
  });
});
</script>

I am just starting to learn javascript so I'm probably doing alot of things wrong, but the idea is to load this ChartJs Line chart on a HTML page. I am getting alot of errors while inspecting the HTML page, the first error is: "Uncaught SyntaxError: Unexpected token 'for'".