title: Iterating though a 3D JSON array
body: <p>I'm trying to write a script that iterate through a JSON array that comes back from an AJAX request. I want it to iterate through each key (string) and value (boolean), and add a CSS class to an object where the ID matches the name of the key.</p>
  
  <p>An additional complexity arises because the array is 3D, the actual values fall under the 'boxes' sub-array.</p>
  
  <p>I sucessfully get the JSON back from the server, the problem arises when I try and iterate though it; I can get the value of the 'expired' variable, but not anything else. </p>
  
  <p>JSON from the server:</p>
  
  <pre><code>{
      "expired": false,
      "boxes": {
          "read_curriculum__c": false,
          "update_salesforce__c": false,
          "slack_add__c": true,
          "orientation__c": false,
          "survey__c": true
      }
  }
  </code></pre>
  
  <p>On the page:</p>
  
  <pre><code>var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {  
      if (xmlhttp.status == 200) {
        console.log(xmlhttp.responseText);
        var responseObj = JSON.parse(xmlhttp.responseText);
        if(responseObj.expired == false)
        {
          for(var i = 0; i &lt; responseObj.boxes.length; i++) // Take however many items are in the boxes array.
          {
            if(responseObj.boxes[i] == true) //Go through each one and check if it's true
            {
              var element = getElementById(responseObj.boxes[i]); //Select the element on the page with the same ID
              element.classList.add("true"); //Add the class 'true'
          }
        }
      }
    }
  };
  xmlhttp.open("GET", "/onboard/onboard.php?function=fetch", true);
  xmlhttp.send();
  </code></pre>
  
  <p>All the variations I have tried give me either 'undefined' or 'Object' as a result. I'm also struggling to work out how to separate the key from the value. Any help greatly appreciated.</p>