CODEWITHSUNDEEP
javascriptjqueryjson
Kevin Py
Kevin Py

Reputation: 2468

convert HTML List to JSON

I have a little problem with my HTML template for convert to JSON. I wish convert a list of HTML messages to JSON. Thank you in advance for your response.

HTML Template

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

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

Upvotes: 0

Views: 1849

Answers (3)

Wolfgang
Wolfgang

Reputation: 896

even if it doesn't look that cool I think this will be much faster:

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

.. depending on your file structure this may not be the best solution

Upvotes: 2

blex
blex

Reputation: 25634

Simply get all your .message elements, and cycle through them to add their properties to the resulting Array (I used trim() to remove extra spaces at the beginning and the end of the message texts):

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>

Upvotes: 1

Morteza Tourani
Morteza Tourani

Reputation: 3536

You can use jQuery to simply extract your date from 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>

Upvotes: 1

Related Questions