Can't get json array into js array on created

Question

I know this question has been asked multiple times already and the answers I have found and have followed them but without success.

Summary: I need to get the array from the classes.json file and then set variable classes from data() to that json data.

This is the classes.json file I need to load the array from.

[{
    "School1": {
      "classTag": ["F1", "E2G", "E2E", "E2A"]
    }
  },
  {
    "School2": {
      "classTag": ["10BFTE", "11BFTE"]
    }
  }
]

These are the methods I've tried:

created() {
  // Load json to classes
  $.getJSON('../assets/classes.json', function(json) {
    for (var key in json) {
      if (json.hasOwnProperty(key)) {
        var item = json[key];
        this.classes.push({
          classTag: item.classTag
        });
      }
    }
  });

}

created() {
  $.getJSON('../assets/classes.json', function(data) {
    this.classes = data;
  }).error(function() {
    console.log('error: json not loaded');
  });

}

Both of the them and others give me this error: Vue Err Msg

Answer 1

looks like you try to call a jquery-method inside your vue-app, but jquery ($) is not into your project/scope. try to do it a) with jquery included (not recommended, much bloat just for one function call) or with plain js.

you might want to look into a more lightweight framework for ajax calls like axios.

edit: or, as the comment states, the built-in fetch method of modern browsers.