выделите все содержимое html между двумя указанными тегами c и сохраните их в объекте javascript - PullRequest
Новая
       7

выделите все содержимое html между двумя указанными тегами c и сохраните их в объекте javascript

1 голос
/ 15 марта 2020

У меня есть что-то подобное в html: 

<div class ="personal-datas">Datas</div>
<h2 class ="name">Jack Bauer</h2>
<div class ="date-of-birth">february the 9th 1984</div>
<h3 class ="company">Jane Ventures</h3>
<h5 class ="status">married</h5>
<p class ="country">Canada</p>
<div class ="personal-datas">Datas</div>
<h2 class ="name">Clarice Sterling</h2>
<div class ="date-of-birth">3rd of March 1981</div>
<h3 class ="company">FBI</h3>
<h3 class ="chasing">Buffalo Bill</h3>
<h3 class ="skill">Profiler</h3>
<h5 class ="status">Bachelor</h5>
<p class ="country">USA</p>
<div class ="personal-datas">Datas</div>

И я хочу выбрать и сохранить в файле JSON все между двумя тегами с классом "personal-datas", чтобы иметь что-то вроде этого: 

{
  "personal-datas1":
    {
      "name": "jack bauer",
      "date-of-birth": "february the 9th 1984",
      "company": "Jane Ventures",
      "status": "married",
      "country": "Canada"
    },
  "personal-datas2":
    {
      "name": "Clarice Sterling",
      "date-of-birth": "3rd of March 1981",
      "company": "FBI",
      "chasing": "Buffalo Bill",
      "skill": "Profiler",
      "status": "Bachelor",
      "country": "USA"
    }
}

Как мне перейти на ваниль JS или Jquery? Спасибо за ваш ответ.

Ответы [ 4 ]

1 голос
/ 15 марта 2020

Я думаю, что лучше реструктурировать ваш HTML, если это возможно, также ваш ожидаемый результат не является синтаксически действительным: 

var res = $("[data-personal=personal-datas]").map((_,el) => {
  var o = {};
  var personal = $(el).data('personal') + (_+1);
  o[personal] = {};
  $(el).find('*').each((_, dataEl) => {
    var p = $(dataEl).data('k');
    var v = $(dataEl).text();
    o[personal][p] = v;
  });
  return o;
}).get();
console.log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-personal ="personal-datas">
  <h2 data-k ="name">Jack Bauer</h2>
  <div data-k ="date-of-birth">february the 9th 1984</div>
  <h3 data-k ="company">Jane Ventures</h3>
  <h5 data-k ="status">married</h5>
  <p data-k ="country">Canada</p>
</div>
<div data-personal ="personal-datas">
  <h2 data-k ="name">Clarice Sterling</h2>
  <div data-k ="date-of-birth">3rd of March 1981</div>
  <h3 data-k ="company">FBI</h3>
  <h3 data-k ="chasing">Buffalo Bill</h3>
  <h3 data-k ="skill">Profiler</h3>
  <h5 data-k ="status">Bachelor</h5>
  <p data-k ="country">USA</p>
</div>
0 голосов
/ 15 марта 2020

Лучше поместить HTML со свойствами данных внутри div. В приведенном ниже коде мы заключили все поля внутри personal-data.

Таким образом, мы могли бы l oop просмотреть все элементы и динамически назначить их свойства. Нам не нужно вручную получать доступ к каждому свойству. 

document.getElementById("js").onclick = function(e) {
  var data = document.querySelectorAll(".personal-datas");

  for (i = 0; i < data.length; i++) {
    var elements = data[i].querySelectorAll("*");

    var objectCollection = [];
    var newObject = {};

    for (j = 0; j < elements.length; j++) {
      if (elements[j].getAttribute("class") != null) {
        newObject[elements[j].getAttribute("class")] = elements[j].innerHTML;
      }
    }

    objectCollection.push(newObject);
    newObject = {};
  }

  var json = JSON.stringify(objectCollection);
  console.log(json);
}
<button id="js">CLICK ME</button>

<div class="personal-datas">
  Datas <br>
  <h2 class="name">Jack Bauer</h2>
  <div class="date-of-birth">february the 9th 1984</div>
  <h3 class="company">Jane Ventures</h3>
  <h5 class="status">married</h5>
  <p class="country">Canada</p>
</div>

<div class="personal-datas">
  Datas <br>
  <h2 class="name">Clarice Sterling</h2>
  <div class="date-of-birth">3rd of March 1981</div>
  <h3 class="company">FBI</h3>
  <h3 class="chasing">Buffalo Bill</h3>
  <h3 class="skill">Profiler</h3>
  <h5 class="status">Bachelor</h5>
  <p class="country">USA</p>
</div>
0 голосов
/ 15 марта 2020

Чтобы достичь этого в jQuery, вы можете использовать map() и nextUntil() для создания массива, содержащего необходимые вам объекты. Затем вы можете заполнить эти объекты, используя класс и содержимое найденных элементов. Попробуйте это: 

var data = $('.personal-datas').map((i, el) => {
  var obj = {};
  $(el).nextUntil('.personal-datas').each((i, el) => obj[el.className] = el.innerText);
  return obj;
}).get();

console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="personal-datas">Datas</div>
  <h2 class="name">Jack Bauer</h2>
  <div class="date-of-birth">february the 9th 1984</div>
  <h3 class="company">Jane Ventures</h3>
  <h5 class="status">married</h5>
  <p class="country">Canada</p>
  <div class="personal-datas">Datas</div>
  <h2 class="name">Clarice Sterling</h2>
  <div class="date-of-birth">3rd of March 1981</div>
  <h3 class="company">FBI</h3>
  <h3 class="chasing">Buffalo Bill</h3>
  <h3 class="skill">Profiler</h3>
  <h5 class="status">Bachelor</h5>
  <p class="country">USA</p>
</div>
0 голосов
/ 15 марта 2020

Вы можете использовать document.getElementByClassName, это вернет массив как объект, точнее HTMLCollection .

Результаты будут возвращены в порядке документа (нисходящий, обратный поиск по глубине).

Например, если вы выполните document.The getElementsByClassName('name');
, это будет верните этот порядок: 

<h2 class ="name">Jack Bauer</h2>
<h2 class ="name">Clarice Sterling</h2>

Таким образом, используя это для всех ваших классов, вы создаете JSON, как и вы sh.

Предполагая, что у вас есть такое же количество элементов, которое вы можете сделать что-то вроде этого: 

const personalDatas = document.getElementsByClassName('personal-datas');
const names = document.getElementsByClassName('name');
const births = document.getElementsByClassName('date-of-birth');
const companies = document.getElementsByClassName('company');
const statuses = document.getElementsByClassName('status');
const countries = document.getElementsByClassName('country');


const finalJson = {};

for (let i = 0; i < personalDatas.length; ++i) {
  const key = 'personal-datas' + i;
  finalJson[key] = {};
  finalJson[key]['name'] = names[i].innerHTML;
  finalJson[key]['date-of-birth'] = births[i].innerHTML;
  finalJson[key]['company'] = companies[i].innerHTML;
  finalJson[key]['status'] = statuses[i].innerHTML;
  finalJson[key]['country'] = countries[i].innerHTML;
}

console.log(JSON.stringify(finalJson, null, 2));
<div class ="personal-datas">Datas</div>
<h2 class ="name">Jack Bauer</h2>
<div class ="date-of-birth">february the 9th 1984</div>
<h3 class ="company">Jane Ventures</h3>
<h5 class ="status">married</h5>
<p class ="country">Canada</p>
<div class ="personal-datas">Datas</div>
<h2 class ="name">Clarice Sterling</h2>
<div class ="date-of-birth">3rd of March 1981</div>
<h3 class ="company">FBI</h3>
<h3 class ="chasing">Buffalo Bill</h3>
<h3 class ="skill">Profiler</h3>
<h5 class ="status">Bachelor</h5>
<p class ="country">USA</p>
...