How to get data from a div using JavaScript

Question

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?

Have you tried with: var divs = document.querySelectorAll(".match"); — Loki
– Loki, Commented Sep 9, 2019 at 21:40
yes, dont know how to extract name and league for match then tho :-( @Loki — user10756951
– user10756951, Commented Sep 9, 2019 at 21:42
are you looking for developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute — zod
– zod, Commented Sep 9, 2019 at 21:48
This is basic JavaScript. Selecting elements and reading their text or HTML. — epascarello
– epascarello, Commented Sep 9, 2019 at 21:49
If you still need this here is the jsfiddle.net/a7f5L0bc/22 with sample solution — Loki
– Loki, Commented Sep 9, 2019 at 21:56

Djaouad · Accepted Answer · 2019-09-09 22:29:27Z

1

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>

edited Sep 9, 2019 at 22:29

answered Sep 9, 2019 at 21:49

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thedude · Accepted Answer · 2019-09-09 21:50:50Z

0

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>

answered Sep 9, 2019 at 21:50

thedude

9,8371 gold badge34 silver badges33 bronze badges

1 Comment

Scott Marcus Over a year ago

This doesn't do what the OP wants. Also, we tend not to answer questions where the OP hasn't even made an attempt at a solution. It just attracts more poor questions.

Collectives™ on Stack Overflow

How to get data from a div using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related