Why get undefined when query task?

Decided to make an edit in a modal window into a Rails app. Faced with the problem that I can't get json object task, although the tasks browser/[:id].the json displays properly.
# app/asset/javascripts/application.js
# This piece of code I added for the experiment
# .attr("data-id") takes an id of a dom attribute.

$(document).ready(function () {
 $('button').click(function (event) {
 data = $.getJSON($(this).attr("data-id")+'.json')
console.log(data.type)
event.preventDefault();
})
})

The result is undefined.
In General, the task is to obtain the modal edit window with the fields filled in.
Causing the desired idea, I do not understand what missed.
March 23rd 20 at 18:59
3 answers
March 23rd 20 at 19:01
Solution
The order problem is solved using js render partelow and use remote: true to links. All of the information.
March 23rd 20 at 19:03
probably so

data = $.getJSON('/tasks/' + $(this).attr("data-id")+'.json')
Regardless of this - santiago commented on March 23rd 20 at 19:06
March 23rd 20 at 19:05
it is strange that the error is not thrown, the script...
the variable you need to declare let, const , var
well, the $.getJSON is asynchronous or callback as the docks, or await async or promise

as for the docks
$('button').click(function (event) {
 $.getJSON($(this).attr("data-id") + '.json', function (data) {
console.log(data);
});
event.preventDefault();
});

Find more questions by tags Ruby on RailsjQuery