Angular undefined attribut but it's not possible

Question

I'm trying to get local JSON data with angular. My component:

import { Component, OnInit } from '@angular/core';
import datalist from '../todolist.json';

console.log(JSON.stringify(datalist));
@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {

  // will contain all data from ../todolist.json
  lists: any[];
  todolist: any;

  constructor() {}

  ngOnInit() {
    const test = Object.keys(datalist);
    for (const prop of test) {
      this.lists.push(datalist[prop]);
    }
  }
}

And I get this error:

ERROR TypeError: "this.lists is undefined"

What am I doing wrong ? I really don't understand, of course, that this.lists is defined...

Answer 1

You need to initialize it as follows

 lists: any[] = [];