Кукловод перебирает div, а затем из результата перебирает дочерний элемент

Question

Я хочу вернуть объект из HTML, как показано ниже:

HTML

<div id="collection">
  <div class="div">
    <h1 class="title">Title 1</h1>
    <ul class="list">
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
    </ul>
  </div>
  <div class="div">
    <h1 class="title">Title 2</h1>
    <ul class="list">
      <li>list item 1a</li>
      <li>list item 2a</li>
      <li>list item 3a</li>
      <li>list item 4a</li>
    </ul>
  </div>
  <div class="div">
    <h1 class="title">Title 3</h1>
  </div>
</div>

Требуемый результат:

{
  title: "Title 1",
  list:{
    item: "list item 1",
    item: "list item 2",
    item: "list item 3"
  }
},
{
  title: "Title 2",
  list:{
    item: "list item 1a",
    item: "list item 2a",
    item: "list item 3a",
    item: "list item 4a"
  }
},
{
  title: "Title 3",
  list:{}
}

Пока что я have:

const result = await page.$$eval('div.div, (divs) => divs.map((div) => {
   return {
      title: div.querySelector('.title').innerText,
   }
}));
console.log(result) 

Я не уверен, как я могу использовать page. $$ eval, чтобы затем перебрать другой элемент; в этом случае ул. Любая помощь будет принята с благодарностью.

Спасибо

Answer 1

попробуйте сделать следующее в своем скрипте кукловода, я думаю, это может сработать:

const values = await page.evaluate(() => {
    const titles = Array.from(document.querySelectorAll('.title')).map(el => el.innerText); // this will get you an array with the titles  
    const list = Array.from(document.querySelectorAll('.list')).map(el => Array.from(el.children).map(elm => elm.innerText));

    const endArray = titles.map((el, index) => {
      return {
        title: el,
        list: list[index],
      }
    })

    return endArray;
});

У вас не может быть объекта с повторяющимися атрибутами, как вы пытаетесь сделать. Лучше определить свой список как массив, поскольку вы знаете, что ваш список имеет повторяющийся тип данных.

Answer 2

Вы можете сделать это с помощью Puppeteer. Просто раскомментируйте функцию page.evaluate(). Я просто прокомментировал это, чтобы вы могли запустить фрагмент и увидеть результаты.

У вас не может быть нескольких записей объектов с одинаковыми ключами, поэтому лучшим решением может быть возврат массива с li значения, так как ключи все равно не имеют значения, верно?

const result = []

//await page.evaluate(() => {
  const divs = document.querySelectorAll('.div')
  divs.forEach(div => {
    const obj = {
      title: div.querySelector('.title').innerText,
      list: [...div.querySelectorAll('ul li')].map(i => i.innerText)
    }
    result.push(obj)
  })
//})

console.log(result)

<div id="collection">
  <div class="div">
    <h1 class="title">Title 1</h1>
    <ul class="list">
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
    </ul>
  </div>
  <div class="div">
    <h1 class="title">Title 2</h1>
    <ul class="list">
      <li>list item 1a</li>
      <li>list item 2a</li>
      <li>list item 3a</li>
      <li>list item 4a</li>
    </ul>
  </div>
  <div class="div">
    <h1 class="title">Title 3</h1>
  </div>
</div>

Answer 3

Я настроил массив в следующем формате:

[
    title: 'Title1',
    list: ['list item 1', 'list item 2', 'list item 3']
]

Мой ответ:

    let result = []
    $('div.div').each(function(index) {
      let title = $(this).find('.title').text()
      let lists = $(this).find('.list')
      let list = []

      if(lists.length > 0) {
        list = []
        lists.children().each(function(index) {
          list.push($(this).text())
        })
      }
      
      result.push({title: title, list: list})

    })
    console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="collection">
      <div class="div">
        <h1 class="title">Title 1</h1>
        <ul class="list">
          <li>list item 1</li>
          <li>list item 2</li>
          <li>list item 3</li>
        </ul>
      </div>
      <div class="div">
        <h1 class="title">Title 2</h1>
        <ul class="list">
          <li>list item 1a</li>
          <li>list item 2a</li>
          <li>list item 3a</li>
          <li>list item 4a</li>
        </ul>
      </div>
      <div class="div">
        <h1 class="title">Title 3</h1>
      </div>
    </div>