$ .getJSON执行问题：填充到数组的json但未使用

Question

我目前正在尝试从服务器上托管的json文件中获取数据，然后将这些数据放入一个全局数组中，然后在以后的vue中使用它遍历该列表。

当前正在发生的事情是填充数组，即在打印到控制台时可以看到它，但是当填充数组时，其长度后来列为0，即使在打印数组时也要注意，请注意使用array [。 ..]值显示为未定义

下图更好地显示了这一点

我尝试设置一个断点并逐行传递。 这将以正确的顺序遍历脚本，显示了数组的实际长度，但仍然无法正常工作（潜在的其他问题，现在不是问题）。

我已经检查过并在html内以正确的顺序调用脚本，即在调用main.js（vue）之前完成JSON拉取

从本地存储中拉取时也有效，唯一改变的是现在从服务器而非用户会话中拉出了json

对不起格式错误的代码，仍然在这里学习我在做什么

var json = [];
$.getJSON("https://skynet.ie/~alanfinnin/other/generated.json", function(data) {
    json = data;

}).done(function() { 
    console.log("Immediatly after $.getJSON pull (length) " + json.length);

    let json_length = json.length;

    for(let i = 0; i < json_length; i++) {
        to_add = json[i];   
                to_add.id = global_id_count;    
        full_list.push(to_add);
            global_id_count++;
     }
});

>--------------

for(i = 0; i < list_length; i++){`
    temp_list_for_loop = [];`
    increment_variable = i+1;`

    console.log("Inside loop for vue: (array length) " + full_list.length + " Accessing index of array: " + full_list[1]);

    for(j = 0; j < full_list_length; j++){
        if(full_list[j].which_list === String(increment_variable))
            temp_list_for_loop.push(full_list[j]);
    }
    /*
        Pushes each list of elements on one at a time
    */
    new Vue({
        el: '#list_' + increment_variable,
        data: {
            tiles: temp_list_for_loop
        }   
    })
}

我希望阵列行为的长度能够正常工作，然后可以解决货架出现问题

<br>link: 
http://skynet.ie/~alanfinnin/stack_oberflow/js_drag_and_drop/
<br>json pull: http://skynet.ie/~alanfinnin/other/js_drag_and_drop/js/object_input.js
<br>vue: 
http://skynet.ie/~alanfinnin/other/js_drag_and_drop/main.js
<br>Image of console:
http://skynet.ie/~alanfinnin/stack_overflow/console_log.PNG

Answer 1

尝试看看我是否能在这里为您提供帮助，但由于您在示例中使用Vue的方式，我觉得您正在引入不必要的复杂性。 为什么不安装Vue并处理其中的$ .getJson。 这将使事情更容易理解，并且可能会解决您遇到的上下文和范围方面的一些问题。 类似于以下内容：

new Vue({
  #el: '#some_element',
  data() {
   return {
     json: {}.

   }
  },
  methods: {
    getJson() {
      $.getJSON("https://skynet.ie/~alanfinnin/other/generated.json", (data) => this.json = data;)
    }
  },
  mounted() {
    this.getJson();
  },
})

当您将Vue应用程序安装到dom时，mount将立即运行，然后它将触发在阻止的方法中定义的getJson方法，这将执行获取并将结果数据复制到本地vue范围。 然后，您可以从那里继续执行/转换数据，但这确实可以简化您的控制流程。

祝你好运！