Don't understand syntax of this for loop

I’m trying to display some data in JSON form in a HTML table.
This Json data is received through an ajax request to https://httpbin.org/get.

I found this tutorial for how to do it:
https://www.encodedna.com/jquery/read-json-file-push-data-into-array-and-convert-to-html-table-using-jquery.htm

For now, I kinda seem to have a knot in my brain since I can’t understand what this snippet is doing:

// EXTRACT VALUE FOR TABLE HEADER.
    var col = [];
    for (var i = 0; i < arrItems.length; i++) {
      for (var key in arrItems[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

Well the comment at the top says what it’s doing, but I don’t understand why it’s doing it like this and what the key variable is for. Is it a Javascript keyword?
Also, for (var key in arrItems[i]) looks like it would loop through an array, except arrItems[i] isn’t an array, but an element of an array
Could someone explain this snippet to me in words?

For context, my whole file so far, applying the tutorial to my task, goes like this:

jQuery(document).ready (function() {
  jQuery('#getrequest').click(function() {
    jQuery.getJSON("https://httpbin.org/get", function(data){
      let jsonItems = [];
        // const jsonString = JSON.stringify(data);
        // console.log(jsonString);
      jQuery.each(data, function (index, value) {
        jsonItems.push(value);
        console.log(jsonItems);
      })

      let col = [];
      for (let i = 0; i < jsonItems.length; i++) {
        for (let key in jsonItems[i]) {
          if (col.indexOf(key) === -1) {
            col.push(key);
          }
        }
      }
      console.log(col);
    });
  });
});
var col = [];
    for (var i = 0; i < arrItems.length; i++) {
      for (var key in arrItems[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

Here you have a nested loop.

  • The outer loop runs a number-range the length of arrItems.
  • The inner loop loops through a number-range the length of the item at index-i of arrItems.

Side note if you come from something like python, js is a bit different:

list = ['a', 'b', 'c']
for (var i in list){console.log(i)}
// output
//0
//1
//2

Inside the inner loop, if the given condition is met, the value of key is pushed on the list col. Key semantically implies that this value is an index that is the “key” to the desired value in a list.

I’m not quite wrapping my head as to what the inner condition is about though. But you only need a couple of log statements to decipher its effect at this point.

I inserted some log statments and put all the code in a Repl so you can run it:

Well, sure, but why does the item at index[i] even have a length? It would have to be an array for that. I’m guessing what that item is, is a key-value pair (which doesn’t qualify as an array, does it?). That inner loop is selecting its key.
My question is:

  • How does JS understand that we mean the key? If it’s just using key as a variable name rather than something else, then it must mean that key is a keyword here.
    Or is it that when this syntax is applied to an array of key-value-pairs, it always selects the key, no matter the variable name?

From w3schools.com:

The JavaScript for/in statement loops through the properties of an object

so jsonItems is an object, yes?

if (col.indexOf(key) === -1) {
          col.push(key);
        }

I also don’t understand why this condition is used, and why it’s starting at the end. A loop is supposed to do something to each element of the array anyway (the condition should already be built into the loop syntax), and it would seem that the sequence doesn’t matter here, so why start from the back?

Well, sure, but why does the item at index[i] even have a length?

You’d have to look at the json and the value being stored. The simple answer is that it’s anticipating an item that is a list or object with indices. You can try to get the value for value here if you’re curious as to what it is.

$.each(data, function (index, value) {
      arrItems.push(value);       // PUSH THE VALUES INSIDE THE ARRAY.
    });

How does JS understand that we mean the key?

It doesn’t, not like this. The name key is for readability – to clarify the intention that what is being cycled is the key. Now, referencing my earlier example (the a,b,c one): it is actually cycling through indexes and not keys, so it may be that whoever wrote this code is using those terms interchangeably. If this is the case, then semantically it would be more appropriate to call it idx or index… so I’d say it may be an inaccuracy, but the code still understandable regardless.

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

So basically that covers what the condition does:

  • if the given value is not present in col, then add that value to col.

The nuance here is there won’t be repeating values. Also worthy of side mention, -1 doesn’t work as it would in a language like python in javascript.

list = [1,2,3]
list.indexOf(3) === -1
//false
list.indexOf(0) === -1
//true
list.indexOf(4) === -1
//true
list.indexOf(1) === -1
//false

Side-note, MDN is a good source for documentation. Many people prefer it to w3. Though as to their actual value I’ll pass on giving judgement.