CODEWITHSUNDEEP
javascript
user10756951
user10756951

Reputation:

How to get data from a div using JavaScript

I have a following code:

<div class="match">
  <div class="match-name">MATCH 1</div>
  <div class="match-league">LEAGUE 2</div>
</div>

<div class="match">
  <div class="match-name">MATCH 2</div>
  <div class="match-league">LEAGUE 1</div>
</div>

What I am trying to do is to scrape the data and the output should be an array of objects using this data-model:

{
  name: "match-name"
  league: "match-league"
}

I am not sure about the scraping part. How to loop through the divs and get the values?

Upvotes: 1

Views: 61

Answers (2)

Djaouad
Djaouad

Reputation: 22776

You can use Array.prototype.map after converting the result of querySelectorAll to an Array using Array.from, and map each .match to an object of the desired format:

var matches = document.querySelectorAll('.match');

var arr = Array.from(matches).map(m => {
  let name = m.querySelector('.match-name').innerText,
      league = m.querySelector('.match-league').innerText;
      return {name : name, league : league}
});

console.log(arr);
<div class="match">
  <div class="match-name">MATCH 1</div>
  <div class="match-league">LEAGUE 2</div>
</div>

<div class="match">
  <div class="match-name">MATCH 2</div>
  <div class="match-league">LEAGUE 1</div>
</div>

Upvotes: 1

thedude
thedude

Reputation: 9812

Here is an example using querySelector API

const matches = document.querySelectorAll(".match")

console.log([...matches].map(match => ({
  name: match.querySelector(".match-name").innerText,
  league: match.querySelector(".match-league").innerText
})))
<div class="match">
  <div class="match-name">MATCH 1</div>
  <div class="match-league">LEAGUE 2</div>
</div>

<div class="match">
  <div class="match-name">MATCH 2</div>
  <div class="match-league">LEAGUE 1</div>
</div>

Upvotes: 0

Related Questions