Last active
June 26, 2019 01:56
-
-
Save developerruhul/31b5f5ce151a846b250ee8f9f6eb7df1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div> | |
| <div class="title">title1</div> | |
| <div class="subtitle">subtitle1</div> | |
| </div> | |
| <div> | |
| <div class="title">title2</div> | |
| <div class="subtitle">subtitle2</div> | |
| </div> | |
| <div> | |
| <div class="title">title3</div> | |
| <div class="subtitle">subtitle3</div> | |
| </div> | |
| <script> | |
| /** | |
| ** Problem: ** | |
| There are two main noticeable points: | |
| * Each box is randomly generated, sometimes it has title (class .title), sometimes subtitle (class .subtitle). | |
| * Each box might have different tag, ie: span, section, div, article. | |
| * Regardless of the format, we need to extract the data using document.querySelector or some other way. You are free to use any library or tool. | |
| * It should work with slight or no change if I change the selectors and the text inside title/subtitle, or the order of them. | |
| * You cannot grab the data from the script tag. That is for demo purpose only. | |
| * We should be able to run your code on the browsers console and see the result in the array like below. | |
| */ | |
| /** | |
| So the way I solved it is - | |
| * Grab all the (.title, .subtitle) with querySelectorAll [it will return .title element followed by the immediate next .subtitle element either from the same box or the next one] -> returns NodeList | |
| * Then map over the NodeList and check if the next element[.title || .subtitle] belongs to the same parent, if it does then create and push object to result array[{}] and set `skipNextEl = true` so we skip the next element. | |
| * if the next elm doesn't belong to the same parent then we probably don't have the other class, in that case we return [thatClasss]: "" for that class | |
| */ | |
| function extractData() { | |
| var result = [] | |
| // Grab all the (.title, .subtitle) with querySelectorAll [it will return .title element followed by the immediate next .subtitle element either from the same box or the next one] -> returns NodeList | |
| var list = [...document.querySelectorAll(".subtitle, .title")] | |
| var skipNextEl = false | |
| // Then map over the NodeList | |
| list.forEach((el, key) => { | |
| var nextEl = list[key + 1] | |
| // check if the next element[.title || .subtitle] belongs to the same parent | |
| var nextParent = nextEl ? nextEl.parentElement : false | |
| var currParent = el.parentElement | |
| var currEmpty = el.className === "title" ? "subtitle" : "title" | |
| // if it does then create and push object to result array[{}] | |
| if (currParent === nextParent) { | |
| // set `skipNextEl = true` so that we can skip the next element. | |
| skipNextEl = true | |
| return result.push({ | |
| [el.className]: el.textContent, | |
| [nextEl.className]: nextEl.textContent, | |
| }) | |
| } else { | |
| // if skipNextEl is true then we return | |
| if (skipNextEl) return (skipNextEl = false) | |
| // if the next elm doesn't belong to the same parent then we probably don't have the other class, in that case we return [thatClasss]: "" for that class | |
| return result.push({ | |
| [el.className]: el.textContent, | |
| [currEmpty]: "", | |
| }) | |
| } | |
| }) | |
| return result | |
| } | |
| console.log(extractData()) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment