append elements from multidimensional array to html page

Question

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.

var arr = [];

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]
};

I want to append the elements of the array to an html page so the results would look like this:

-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

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.

this is what I tried

$.each(arr, function(idx, obj){ 
    $("#categories").append("--"+obj+"<br>");
    $.each(obj, function(key, value){
        $("#categories").append("--"+value+"<br>");
         //keep going with the each statements and check if the elements are objects

    });
});

Sorry For my English.

RichieAHB · Accepted Answer · 2014-01-17 12:45:51Z

2

Here is a fiddle that does this for you - I've re-laid out your return slightly because it makes little sense to have the value returned below the string indented further. You can't then tell if it's a key or a value.

var indent = "";

function myFunction(obj) {

    indent += '-';

    for (var key in obj) {

        x = obj[key];

        if ($.isPlainObject(x)) {
            $('#categories').append(indent + key + '<br />');
            myFunction(x);
        } else {
            $('#categories').append(indent + key + '<br />');
            if (typeof x === 'object') {
                for (var key in x) {
                    $('#categories').append(indent + '-' + x[key] + '<br />');
                }
            } else {
                $('#categories').append(indent + '-' + x + '<br />');
            }
        }
    }

    indent = indent.substring(0, indent.length - 1);
}

myFunction(arr);

http://jsfiddle.net/8u53K/1/

edited Jan 17, 2014 at 12:45

answered Jan 17, 2014 at 12:24

RichieAHB

2,0882 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Pain Over a year ago

This worked grate but I need the results exactly as I have in the example I made. You don't need to worry about the "-".

Linga · Accepted Answer · 2014-01-17 12:43:06Z

1

After several minutes I did it.

$.each(arr, function(idx, obj){ 
$("#categories").append("-"+idx+"<br>");
for(var i in obj)
{
    if (typeof (obj[i])!='number')
          $("#categories").append("--"+i+"<br>");
    if(typeof (obj[i])==='object')
    {
        for(var j in obj[i])
        {
            $("#categories").append("---"+j+"<br>");
            var len =obj[i][j].length;
            if(typeof len=='undefined')
            {
                for (var m in obj[i][j])
                    $("#categories").append("----"+m+"<br>");
                $("#categories").append("----"+obj[i][j][m]+"<br>");
            }
            else
            {
                for(var k=0;k<obj[i][j].length;k++)
                {
                   $("#categories").append("----"+obj[i][j][k]+"<br>");
                }
            }

        }
    }
    else
    {
    $("#categories").append("---"+obj[i]+"<br>");
    }
}

});

here is an example Fiddle

answered Jan 17, 2014 at 12:43

Linga

10.6k10 gold badges57 silver badges109 bronze badges

2 Comments

RichieAHB Over a year ago

This isn't recursive so would break if any more levels were required. Not with the OP asked for but it may as well be made to be versatile.

RichieAHB Over a year ago

I mean if you needed more than 4 levels of indents.

Collectives™ on Stack Overflow

append elements from multidimensional array to html page

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related