How to parse html div text to json

I try to parse data from html to json structure, but I get empty strings. I do it first time.

Here example of repeatable div block:

// I try get data with this javascript in browser

var divs = document.querySelectorAll(".col-md-12"),
  i = 0,
  jData = [];
for (var div of divs) {
  var vuzTitles = div.getElementsByTagName(".itemVuzTitle"),
    obj = {};
  for (var d of vuzTitles) {
    obj.title = d.innerText;
    var as = div.getElementsByTagName(".tooltipq");
    obj.scores = a.innerText;
  }
  jData.push(obj);
}
jData = JSON.stringify(jData);
console.log(jData);

<div class="col-md-12 itemVuz">
  <div class="vuzesfullnorm">
    <div class="col-md-7">
      <a href="/vuz/5309">
        <img class="" src="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg" data-src="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg" data-srcset="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg"
          alt="Логотип Реавиз в Москве" style="float: left; padding: 0 10px 0 0;max-width: 100px;max-height: 100px;" srcset="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg">
        <div class="itemVuzTitle">
          Медицинский университет Реавиз в Москве
        </div>
      </a>
      <h6 class="fitemVv"><a href="/vuz/5309/programs/bakispec">Программы</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="/vuz/5309/otziv">Отзывы</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="/vuz/5309/podrazdeleniya">Факультеты</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="/vuz/5309/voprosy">Задать вопрос</a></h6>
      <div class="clearfix opisItemVV">
        Лечебное дело, Стоматология, Фармация
        <div style="margin-top: 10px;">
          <div class="forcheck wantabit" aatrfch="vuz" vuz="5309" id="favv5309">Хочу поступить</div>
          <div class="wantabit nuLadnoUzhe" id="compare5309" compid="5309">Сравнить</div>
          <div id="optcompare5309" style="display: none;">
            <a href="/region/city//services/comparevuz" id="cllicomq5309" style="color: #f2f2f2;">
              <div class="wantabit nuLadnoUzhe" style="width: 170px; background: #F44336;">Посмотреть сравнение</div>
            </a>
            <div class="wantabit delSpItem" id="cllicom5309" compid="5309" style="width: 170px; color: #f2f2f2; background: #F44336;">Убрать из сравнения</div>
          </div>
          <div id="optcompareelseone5309" style="display: none;">
            <a href="/region/city//services/comparevuz" style="color: #f2f2f2;">
              <div class="wantabit nuLadnoUzhe" style="width: 170px; background: #F44336;">Нужно добавить еще 1 вуз</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="col-md-4 info">
        <div class="forNewSpecTitleParam">
          <center>Стоимость (руб/год)</center>
        </div>
        <center><a class="tooltipq">от 286000 <font class="price">⃏</font>  <span class="classic">минимальная стоимость по вузу (руб/год)</span></a> <span class="yearVuzInfoSpan"><a class="tooltipq fixToolT">2022<span class="classic">информация о минимальной стоимости за 2021-2022 год</span></a>
          </span>
        </center>
      </div>
      <div class="col-md-4 info">
        <div class="forNewSpecTitleParam">
          <center>Бюджет</center>
        </div>
        нет
      </div>
      <div class="col-md-4 info">
        <div class="forNewSpecTitleParam">
          <center>Платное</center>
        </div>
        <center><a class="tooltipq">от 125<span class="classic">минимальный суммарный проходной балл на платное по вузу</span></a> <span class="yearVuzInfoSpan"><a class="tooltipq fixToolT">2022<span class="classic">информация о платных местах за 2022 и минимальном проходном балле на платное за 2021 год, так как баллы за 2022 становятся известны только после окончания приемной кампании 2022 года</span></a>
          </span>
        </center>
        <center><a class="tooltipq" style="font-size: 11px; color: gray;">670 мест<span class="classic">количество платных мест по вузу</span></a></center>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
</div>

But I get this:

[{},{},{},...,{},{},{}]

How I can get json text from classes .itemVuzTitle and .tooltipq to json structure with fields name like title and scores? Please, help with this question. It helps save a lot of hours of my life.

Answer

class .col-md-12 is too common and may not contain .itemVuzTitle, you need to select class .itemVuzPremium as parent container

var jData = []
document.querySelectorAll(".itemVuzPremium").forEach(function(el) {
  var title = el.querySelector(".itemVuzTitle").textContent.trim(),
      score = el.querySelector(".tooltipq").textContent.match(/d+/)[0]; // extract digit only
    jData.push({title: title, score: score})
})
console.log(JSON.stringify(jData, false, 2))

output

[
  {
    "title": "Университет Синергия",
    "score": "80000"
  },
  {
    "title": "Российский новый университет",
    "score": "52000"
  },
  {
    "title": "Московский технический университет связи и информатики",
    "score": "64000"
  }
]

Advertisement

Answer