Comment parcourir des éléments HTML et remplir un objet Json?

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

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

    jsonObject.push(obj);

});

Je ne connais pas jQuery, mais avec JavaScript, vous pouvez faire quelque chose comme ça.

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

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

Sur la base de votre exemple Html , il semble que tout ce que vous essayez de collecter est dans un ordre linéaire, vous obtenez donc un titre, une date, un corps et un lien, puis un nouvel en-tête avec les éléments associés que vous voulez collecter, puisque cela ne semble pas avoir la complication d'avoir des choses ordonnées de manière non linéaire, vous pouvez faire quelque chose comme ce qui suit:

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

Voici un jsfiddle pour cela: https://jsfiddle.net/Lyojx85e/

Je ne parviens pas à obtenir le texte des balises d'ancrage sur le violon (je crois parce que les balises d'ancrage imbriquées ne sont pas valides et seront analysées comme des balises d'ancrage séparées par le navigateur), mais le code fourni devrait fonctionner dans un exemple du monde réel. Si .text () ne fonctionne pas, vous pouvez le changer en .html () sur le lien, j'étais confus sur ce que vous essayez d'obtenir sur celui-ci, j'ai donc mis à jour la réponse pour obtenir l'attribut href du lien tel qu'il apparaît que c'est ce que vous voulez. Le fait est que l'ancre avec la classe n'a pas d'attribut href, donc je vous laisse le soin de corriger cette partie vous-même, mais cette réponse devrait vous donner ce dont vous avez besoin.

Utilisez toujours la carte pour des choses comme celle-ci. Cela devrait ressembler à quelque chose comme:

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