Как от l oop до HTML элементов и заполнить Json -объект?

Question

Я просматриваю все теги html в файле html, проверяю, соответствуют ли эти теги условиям, и пытаюсь составить JSON -объект следующей схемы:

[
{    title: 'abc',    date: '10.10.10',    body: ' P tags here',    href: ''  },
{    title: 'abc',    date: '10.10.10',    body: ' P tags here',    href: ''  },
{    title: 'abc',    date: '10.10.10',    body: ' P tags here',    href: ''  }
]

Но я бы хотел создать новую запись только для элементов, классифицированных как «заголовок», все остальные элементы должны быть добавлены к ранее созданной записи. Как мне этого добиться?

Текущий код:

$('*').each((index, element) => {


  if ( $(element).hasClass( "header" ) ) {
      jsonObject.push({
          title: $(element).text()
      });
  };
  if( $(element).hasClass( "date" )) {
      jsonObject.push({
          date: $(element).text()
      });
   }

   //links.push($(element))
});
console.log(jsonObject)

Результат:

  {
    title: 'TestA'
  },
  { date: '10.10.10' },
  {
    title: 'TestB'
  },
  { date: '10.10.11' }

Я бы хотел, чтобы на этом этапе было что-то вроде:

      {
        title: 'TestA'
      ,
       date: '10.10.10' },
      {
        title: 'TestB'
      ,
       date: '10.10.11' }

UPD: Вот пример HTML файла:

<h1 class="header">H1_Header</h1>
<h2 class="date">Date</h2>
<p>A.</p>
<p>B.</p>
<p>С.</p>
<p>D.</p>
<a class="source"><a href="http://">http://</a></a>
<h1 class="header">H1_Header2</h1>
<h2 class="date">Date2</h2>
<p>A2.</p>
<p>B2.</p>
<p>С2.</p>
<p>D2.</p>
<a class="source"><a href="http://2">http://2</a></a>

Спасибо за ваше время!

Answer 1

На основе вашего примера Html кажется, что все, что вы пытаетесь собрать, находится в линейном порядке, поэтому вы получаете заголовок, дату, тело и ссылку, а затем новый заголовок со связанными элементами, которые вы хотите собрать, поскольку похоже, что здесь нет сложностей, связанных с упорядочением вещей в нелинейном режиме, вы можете сделать что-то вроде следующего:

let jsonObject = null;
let newObject = false;
let appendParagraph = false;
let jObjects = [];

$('*').each((index, element) => {
  if ($(element).hasClass("header")) {
      //If newObject is true, push object into array
      if(newObject)
         jObjects.push(jsonObject);
      //Reset the json object variable to an empty object
      jsonObject = {};
      //Reset the paragraph append boolean
      appendParagraph  = false;
      //Set the header property
      jsonObject.header = $(element).text();
      //Set the boolean so on the next encounter of header tag the jsobObject is pushed into the array
      newObject = true;
  };

  if( $(element).hasClass( "date" )) {
      jsonObject.date = $(element).text();
  }

  if( $(element).prop("tagName") === "P") {
      //If you are storing paragraph as one string value
      //Otherwise switch the body var to an array and push instead of append
      if(!appendParagraph){ //Use boolean to know if this is the first p element of object
         jsonObject.body = $(element).text();
         appendParagraph = true; //Set boolean to true to append on next p and subsequent p elements
      } else {
         jsonObject.body += (", " + $(element).text()); //append to the body
      }

  }

  //Add the href property
  if( $(element).hasClass("source")) {
       //edit to do what you wanted here, based on your comment:
       jsonObject.link = $(element).next().html(); 
       //jsonObject.href= $(element).attr('href');
  }
});

//Push final object into array
jObjects.push(jsonObject);

console.log(jObjects);

Вот jsfiddle для этого: https://jsfiddle.net/Lyojx85e/

Я не могу получить текст тегов привязки на скрипке (я считаю, потому что вложенные теги привязки недействительны и будут анализироваться браузером как отдельные теги привязки), но предоставленный код должен работать на примере реального мира. Если .text() не работает, вы можете переключить его на .html() в ссылке, я был смущен тем, что вы пытаетесь получить по этой ссылке, поэтому я обновил ответ, чтобы получить атрибут href ссылки, как он появляется это то, что вы хотите. Дело в том, что якорь с классом не имеет атрибута href, поэтому я предоставлю вам исправить эту часть для себя, но этот ответ должен дать вам то, что вам нужно.

Answer 2

Всегда используйте карту для подобных вещей. Это должно выглядеть примерно так:

let objects = $('.header').get().map(el => {
  return {
    date: $(el).attr('date'),
    title: $(el).attr('title'),
  }
})

Answer 3

Насчет jQuery я не знаю, но с JavaScript вы можете сделать что-то вроде этого.

const arr = [];
document.querySelectorAll("li").forEach((elem) => {
  const obj = {};
  const title = elem.querySelector("h2");
  const date = elem.querySelector("date");
  if (title) obj["title"] = title.textContent;
  if (date) obj["date"] = date.textContent;
  arr.push(obj);
});
console.log(arr);

<ul>
  <li>
    <h2>A</h2>
    <date>1</date>
  </li>
  <li>
    <h2>B</h2>
  </li>
  <li>
    <date>3</date>
  </li>
</ul>

Answer 4

$('*').each((index, element) => {
  var obj = {};

  if ( $(element).hasClass( "header" ) ) {
    obj.title = $(element).text();
  };
  if( $(element).hasClass( "date" )) {
    obj.date = $(element).text()
   }

    jsonObject.push(obj);

});