javascript - $.getJSON execution issue: json to array is populated but not used

Question

I'm currently trying to take in data from a json file hosted on a server, this data is then put in a global array which is then used later in vue to loop through the list.

Currently what is happening is that the array is populated ie can be seen when printed to the console, but when the array is populated the length is then LATER listed as 0, even though when printed the array is populated, note that using array[...] the value comes out as undefined

This is better seen with the image below

I have tried setting up a breakpoint and passing through line by line. This goes through the scripts in the RIGHT order, showing the actual length of the array but still will not work (potential other issue, not an issue now).

I have checked and inside the html the script calls are in the right order ie the json pull is done BEFORE main.js(vue) is called

This worked when pulling from local storage also, the only thing that changed was now the json is being pulled from a server instead of the users session

Sorry about the badly formatted code, still learning what i'm doing here

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
        }   
    })
}

I would expect that the array act populated with its length working properly, later issues with the shelves being populated may then be solved

<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

标签： javascriptjqueryarraysjsonvue.js

Answer 1

Trying to see if i can help you out here but I get the sense you are introducing needless complexity because of the way you use Vue in your examples. Why dont you mount vue and handle the $.getJson inside it. This will make things easier to comprehend and might solve some issues with context and scope that you are running into. Something along the lines of:

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();
  },
})

mounted will run as soon as your Vue app is mounted to the dom, it will then fire the getJson method defined in the method blocked, wich will execute the fetch and copy the resulting data to your local vue scope. You can then carry on executing / transforming the data from there, but it will really simplify your control flow.

best of luck!