title: append elements from multidimensional array to html page
body: <p>I am designing a category system with jquery where I can insert values in a multidimensional array then use jquery to append them to some html page. I ran to a problem where I have to update the code every time I add more elements to my array. </p>
  
  <p>var arr = [];</p>
  
  <pre><code>arr =
  {
  "a":{
        "d":"value",
        "e":"value",
        "f":"value",
        "g":{"some value":[1, 2, 3]}
      },
  "b":{
      "value1":"value",
      "value2":{"aaa":{"sss": "ddd"}, "bbb":{"eee": "ddd"}},
      "value3":"value vvv"
      },
  "c":[1, 2, 3]
  };
  </code></pre>
  
  <p>I want to append the elements of the array to an html page so the results would look like this:</p>
  
  <pre><code>-a
  --d
  ---value
  --e
  ---value
  --f
  ---value
  --g
  ---some value
  ----1
  ----2
  ----3
  -b
  --value1
  ---value
  --value2
  ---aaa
  ----sss
  ----ddd
  ---bbb
  ----eee
  ----ddd
  --value3
  ---value vvv
  -c
  --1
  --2
  --3
  </code></pre>
  
  <p>I want to write a series of $.each statements to go through any multidimensional array (with x number of levels) and append its elements as shown above. The problem I am running into is that I am getting [object Object] values and I understand why, but I need to fetch and append all of the elements. I am not sure how to write the $.each statements.</p>
  
  <p>this is what I tried</p>
  
  <pre><code>$.each(arr, function(idx, obj){ 
      $("#categories").append("--"+obj+"&lt;br&gt;");
      $.each(obj, function(key, value){
          $("#categories").append("--"+value+"&lt;br&gt;");
           //keep going with the each statements and check if the elements are objects
  
      });
  });
  </code></pre>
  
  <p>Sorry For my English.</p>