如何從div的id創建json obj或數組？

Question

我有一個情況，我需要從我的頁面上的一些ID創建一些JSON。

這裏有一些代碼。也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); 

這將返回兩個對象爲jsonObj和4的jsonObj1

我需要把它們以某種方式結合起來，這樣的結果將是：

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

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

我想我需要在第一個foreach中做另一個foreach，並將其他id添加到json中，但是，我不知道如何做到這一點。

有什麼想法？

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); 

這將輸出：

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

Answer 2

我想出了一個不同的JSON構建如下，

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

請參見下面的代碼，如果你有興趣在上述構建，

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); 

Answer 3

AndreasAL的回答更簡潔的變化：

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

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

    return obj; 
}).get();