CODEWITHSUNDEEP
jqueryjsoneachattr
Patrioticcow
Patrioticcow

Reputation: 27038

how to create json obj or array from div's id's?

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?

Upvotes: 2

Views: 3656

Answers (3)

ehynds
ehynds

Reputation: 4463

A more concise variation of AndreasAL's answer:

var jsonObj = $(".msgid").map(function() {
    var obj = { id: this.id };

    obj.comments = $(".comments", this).map(function() {
        return { id: this.id };
    }).get();

    return obj;
}).get();

Upvotes: 4

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

I came up with a different json construct as below,

jsonObj = [
           {'ids': '167', 'comments': ['129', '130']},
           {'ids': '166', 'comments': ['134', '136']}
];

See below code if you are interested in above construct,

DEMO

var jsonObj = [];
var len, comments;
$('.msgid').each(function(index){
    len = jsonObj.push({'ids' : $(this).attr('id')});
    comments = [];
    $(this).find('.comments').each (function () {
        comments.push($(this).attr('id'));
    });
    jsonObj[len - 1]['comments'] = comments;
});

console.log(jsonObj);

Upvotes: 2

Andreas Louv
Andreas Louv

Reputation: 47099

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"
            }
        ]
    },
    {
        ....
    }
]

Upvotes: 1

Related Questions