將HTML列表轉換爲JSON

Question

我的HTML模板轉換爲JSON時遇到了一些問題。 我希望將HTML消息列表轉換爲JSON。預先感謝您的回覆。

HTML模板

<div class="message"> 
    <div class="message-data"> 
     <div class="infos"> 
      <h4 class="pseudo">Name</h4> 
      <span class="date">MM/DD/YYYY</span> 
      <span class="time">HH:MM</span> 
     </div> 
    </div> 
    <div class="message-content"> 
     <div class="message-text"> 
      Message here 
     </div> 
    </div> 
</div> 

<!-- Others .message --> 

JSON渲染

{ 
    "list": [ 
     { 
      "pseudo": "Name", 
      "date": "MM/DD/YYYY", 
      "time": "HH:MM", 
      "message": "Message here" 
     }, 
     /* ... */ 
    ] 
} 

Answer 1

即使不看很酷，我認爲這將是更快：

var pseudo = document.getElementsByClassName("pseudo"); 
var date = document.getElementsByClassName("date"); 
var time = document.getElementsByClassName("time"); 
var message = document.getElementsByClassName("message-text"); 

var list = []; 
for(var i=0, l=pseudo.length;i<l;i++) { 
list.push({ 
    pseudo: pseudo[i].textContent, 
    data: date[i].textContent, 
    time: time[i].textContent, 
    message: message[i].textContent 
}) 
} 
console.log(list); 

..根據你的文件結構，這可能不是最好的解決方案

Answer 2

您可以使用jQuery簡單地從html提取您的日期：

var result = []; 
 

 
$(".message").each(function() { 
 
    var obj = { 
 
    pseudo: $(this).find(".pseudo").text(), 
 
    date: $(this).find(".date").text(), 
 
    time: $(this).find(".time").text(), 
 
    message: $(this).find(".message-text").text(), 
 
    }; 
 
    result.push(obj); 
 
}) 
 

 
console.log(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="message"> 
 
    <div class="message-data"> 
 
    <div class="infos"> 
 
     <h4 class="pseudo">Name</h4> 
 
     <span class="date">MM/DD/YYYY</span> 
 
     <span class="time">HH:MM</span> 
 
    </div> 
 
    </div> 
 
    <div class="message-content"> 
 
    <div class="message-text"> 
 
     Message here 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="message"> 
 
    <div class="message-data"> 
 
    <div class="infos"> 
 
     <h4 class="pseudo">John</h4> 
 
     <span class="date">09/11/2011</span> 
 
     <span class="time">HH:MM</span> 
 
    </div> 
 
    </div> 
 
    <div class="message-content"> 
 
    <div class="message-text"> 
 
     World Disaster 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

只是獲得所有.message元素，並循環通過他們自己的屬性添加到所產生的陣列（我用trim()除去開頭多餘的空格和消息文本的末尾）：

console.log(messagesToJSON()); 
 

 
function messagesToJSON(){ 
 
    var messages = [], 
 
     elements = $('.message'); 
 
    for(var i=0; i<elements.length; i++){ 
 
    messages.push({ 
 
     "pseudo": elements.eq(i).find('.pseudo').text(), 
 
     "date": elements.eq(i).find('.date').text(), 
 
     "time": elements.eq(i).find('.time').text(), 
 
     "message": elements.eq(i).find('.message-text').text().trim() 
 
    }); 
 
    } 
 
    return {list: messages}; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="message"> 
 
    <div class="message-data"> 
 
     <div class="infos"> 
 
      <h4 class="pseudo">Kevin</h4> 
 
      <span class="date">08/01/2016</span> 
 
      <span class="time">14:52</span> 
 
     </div> 
 
    </div> 
 
    <div class="message-content"> 
 
     <div class="message-text"> 
 
      Hi there! 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="message"> 
 
    <div class="message-data"> 
 
     <div class="infos"> 
 
      <h4 class="pseudo">Robert</h4> 
 
      <span class="date">08/01/2016</span> 
 
      <span class="time">15:03</span> 
 
     </div> 
 
    </div> 
 
    <div class="message-content"> 
 
     <div class="message-text"> 
 
      Hello 
 
     </div> 
 
    </div> 
 
</div>