$ .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范圍。 然后，您可以從那里繼續執行/轉換數據，但這確實可以簡化您的控制流程。

祝你好運！