将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>