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

Posted 2023-02-22

【中文标题】$.getJSON 执行问题：json 到数组已填充但未使用

【英文标题】：$.getJSON execution issue: json to array is populated but not used

【发布时间】：2019-10-27 20:15:02

【问题描述】：

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

目前发生的情况是数组已填充，即在打印到控制台时可以看到，但是当填充数组时，长度随后被列为 0，即使在打印时填充了数组，请注意使用array[...] 的值是未定义的

下图更好看

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

我已经检查并在 html 中脚本调用的顺序正确，即 json pull 是在调用 main.js(vue) 之前完成的

这在从本地存储中提取时也有效，唯一改变的是现在从服务器而不是用户会话中提取 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

【参考方案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，mounted 就会运行，然后它会触发在阻塞的方法中定义的 getJson 方法，它会执行 fetch 并将结果数据复制到你的本地 vue 范围。然后您可以从那里继续执行/转换数据，但这确实会简化您的控制流程。

祝你好运！

【讨论】：

虽然这确实有效，但它带来了更多需求，因为 json 文件确实需要为四个 vue 中的每一个进行拆分，但这确实有效！谢谢