Question

i have a situation where i need to create some json from some id’s on my page.

here is some some code. and also jsfiddle

<ul class="wall_message">
    <li id="167" class="msgid">
        <div class="wall_msg">text</div>
        <div id="129" class="comments">
            <div class="wall_img">commemt</div>
        </div>
        <div id="130" class="comments">
            <div class="wall_img">commemt</div>
        </div>
    </li>
    <li id="166" class="msgid">
        <div class="wall_img">text</div>
        <div class="wall_msg">
            <div id="134" class="comments">
                <div class="wall_img">commemt</div>
            </div>
            <div id="136" class="comments">
                <div class="wall_img">commemt</div>
            </div>
        </div>
    </li>
</ul>​

var jsonObj = []
var jsonObj1 = [];

$('.msgid').each(function(index,val){
    jsonObj.push({ids : $(this).attr('id')});
});

$('.comments').each(function(index,element){
    jsonObj1.push({id : $(this).attr('id')});
});

console.log(jsonObj);
console.log(jsonObj1);

this will return 2 objects for jsonObj and 4 for the jsonObj1

i need to combine them somehow so that the result will be:

ids: "167"
comment: {
    id: "129"
    id: "130"
}

ids: "166"
comment: {
    id: "134"
    id: "136"
}

i think i need to do another foreach in the first foreach and add to the json the other id’s, however, im not sure how to do that.

any ideas?

Answer 1

var jsonObj = [];

$('.msgid').each(function(){
    var obj = {
        id: this.id,
        comments: []
    };
    $(".comments", this).each(function() {
        obj.comments.push({
            id: this.id
        });
    });
    jsonObj.push(obj);
});

console.log(jsonObj);

this will output:

[
    {
        id: "167",
        comments: [
            {
                id: "129"
            },
            {
                id: "130"
            }
        ]
    },
    {
        ....
    }
]