Divide the elements of the array separated by white space into individual components within the array

Question

Divide the elements of the array separated by white space into individual components within the array

Scenario

I am in the process of creating a basic webpage that will allow me to showcase and filter bookmarks. Each bookmark can be associated with multiple tags, and tags may be duplicated across different bookmarks. The tags for each bookmark are stored in a data attribute within the wrapper element for that bookmark (as shown below). My ultimate objective is to dynamically generate a menu containing all the tags present on the page and toggle their visibility based on user selections. I am keen on keeping this project simple and self-contained, so I prefer solutions using pure JavaScript over external libraries.

Issue

Currently, my main challenge lies in generating a comprehensive array of tags. While I have successfully filtered out undefined elements (when a bookmark has no tags) and removed duplicate tags, I am struggling when it comes to handling bookmarks with multiple tags. Since a data attribute can only be used once per element, all tags for a single bookmark need to be stored as a list within the data attribute.

My goal is to split multiple tags from a singular data attribute entry into separate elements within the array for every bookmark with more than one tag.

For reference, consider the "data-tags" attribute in the <article> element:

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-One Tag-Two">
    <section class="item">Bookmark Description</section>
    <section class="tags">
        <a href="#" class="tag">Tag-One</a>
        <a href="#" class="tag">Tag-Two</a>
    </section>
</article>

The first part of my script is functional:

const notes = document.querySelectorAll('.note');
let tags = [];
// extract tags
notes.forEach(note => tags.push(note.dataset.tags));
//Resulting array format: tags[] = ("Tag-One Tag-Two")
//remove duplicates
tags = tags.filter((value,index,array) => array.indexOf(value) == index);
//remove undefined values
tags = tags.filter(tag => tag !== undefined);

However, the following section poses challenges. Despite attempting various looping techniques, the utilization of splice() does not yield the expected results - often leading to premature trimming of the array:

for (let index = 0; index < tags.length; index++) {
   var value = tags[index];
   if (value.indexOf(' ') > 0 ){
     var newTags = value.split(' ');
     newTags.forEach(newTag => tags.push(newTag));
     tags.splice(index,1);
   }
 }

Any assistance offered would be greatly valued. Feel free to critique the initial code as well!

javascript arrays

Answer 1

Answer №1

Retrieve all elements containing data-tags by using the attribute selector [data-tags]. Transform them into an array with Array.from() and map them to extract tags. Flatten the array of arrays by separating the tags string, then eliminate any empty tags. Utilize a Set to remove duplicates, and convert it back to an array either with Array.from() or array spread.

const notes = document.querySelectorAll('[data-tags]');

const tags = Array.from(
  new Set(
    Array.from(notes, note => note.dataset.tags.split(/\s+/g))
      .flat()
      .filter(Boolean)
  )
)

console.log(tags)

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-One Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="">
</article>

<article class="note"
    data-date="2021-08-04T03:40">
</article>

To correct your code, only add tags if they exist, split the tags, and use array spread to append multiple items to the array instead of creating sub-arrays:

const notes = document.querySelectorAll('.note');
let tags = [];
// get tags
notes.forEach(note => 
  note.dataset.tags && tags.push(...note.dataset.tags.split(/\s/g))
);
//Will look like this: tags[] = ("Tag-One Tag-Two")
//remove dupes
tags = tags.filter((value,index,array) => array.indexOf(value) == index);

//no need to filter empties

console.log(tags);

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-One Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="">
</article>

<article class="note"
    data-date="2021-08-04T03:40">
</article>

Answer 2

Retrieve all elements containing data-tags by using the attribute selector [data-tags]. Transform them into an array with Array.from() and map them to extract tags. Flatten the array of arrays by separating the tags string, then eliminate any empty tags. Utilize a Set to remove duplicates, and convert it back to an array either with Array.from() or array spread.

const notes = document.querySelectorAll('[data-tags]');

const tags = Array.from(
  new Set(
    Array.from(notes, note => note.dataset.tags.split(/\s+/g))
      .flat()
      .filter(Boolean)
  )
)

console.log(tags)

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-One Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="">
</article>

<article class="note"
    data-date="2021-08-04T03:40">
</article>

To correct your code, only add tags if they exist, split the tags, and use array spread to append multiple items to the array instead of creating sub-arrays:

const notes = document.querySelectorAll('.note');
let tags = [];
// get tags
notes.forEach(note => 
  note.dataset.tags && tags.push(...note.dataset.tags.split(/\s/g))
);
//Will look like this: tags[] = ("Tag-One Tag-Two")
//remove dupes
tags = tags.filter((value,index,array) => array.indexOf(value) == index);

//no need to filter empties

console.log(tags);

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-One Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="Tag-Two">
</article>

<article class="note"
    data-date="2021-08-04T03:40"
    data-tags="">
</article>

<article class="note"
    data-date="2021-08-04T03:40">
</article>

Answer 3

Answer №2

To retrieve all the tags, you can extract them, split by spaces, filter out falsey values, and then utilize a Set to obtain unique tags.

const notes = document.querySelectorAll('.note');
const tags = [...new Set(
  [...notes]
    .flatMap(note => note.dataset.tags.split(/\s+/g))
    .filter(Boolean)
 )];
console.log(tags);

<article class="note" data-date="2021-08-04T03:40" data-tags="Tag-One Tag-Two">
  <section class="item">Bookmark Description</section>
  <section class="tags">
    <a href="#" class="tag">Tag-One</a>
    <a href="#" class="tag">Tag-Two</a>
  </section>
</article>
<article class="note" data-date="2021-08-04T03:40" data-tags="Tag-three Tag-Two">
  <section class="item">Bookmark Description</section>
  <section class="tags">
    <a href="#" class="tag">Tag-One</a>
    <a href="#" class="tag">Tag-Two</a>
  </section>
</article>

Answer 4

To retrieve all the tags, you can extract them, split by spaces, filter out falsey values, and then utilize a Set to obtain unique tags.

const notes = document.querySelectorAll('.note');
const tags = [...new Set(
  [...notes]
    .flatMap(note => note.dataset.tags.split(/\s+/g))
    .filter(Boolean)
 )];
console.log(tags);

<article class="note" data-date="2021-08-04T03:40" data-tags="Tag-One Tag-Two">
  <section class="item">Bookmark Description</section>
  <section class="tags">
    <a href="#" class="tag">Tag-One</a>
    <a href="#" class="tag">Tag-Two</a>
  </section>
</article>
<article class="note" data-date="2021-08-04T03:40" data-tags="Tag-three Tag-Two">
  <section class="item">Bookmark Description</section>
  <section class="tags">
    <a href="#" class="tag">Tag-One</a>
    <a href="#" class="tag">Tag-Two</a>
  </section>
</article>

Divide the elements of the array separated by white space into individual components within the array

Scenario

Issue

Answer №1

Answer №2

Similar questions

The command "npm run build:css " is not functioning properly, but when I execute the script independently, it works fine

How to incorporate both image and text links within an HTML div container using JavaScript

`Is it possible to retrieve Wikipedia information directly from a Wikipedia link?`

Tips for showcasing a "loading" animation as a lazy-loaded route component loads

AJAX requires manual updating by clicking on a button

Load the content of the dialog and transfer variables

Tips for adding a border to a 3D pie chart in Highcharts

Rotating an SVG shape a full 360 degrees results in no visible change

Modify the Div background color by accessing the HEX value saved in a JSON file

Using jQuery .animate() leading to erratic input movements

Retrieving information from a separate JavaScript file

Incorporate an image into a div element with the power of jQuery

Engage with Vue.js and traditional JavaScript (plain) in your projects

"Adding content to the DOM using AJAX, the data is showing up as plain text rather than formatted

Issues arise when Angular Meteor fails to load the UI-Router properly

AngularJS checkbox validation requires a minimum of two checkboxes to be selected

Retrieve a collection containing all the variables that have been defined

What steps should I take to fix the error "Unused left side of comma operator with no side effects.ts(2695)" in my React project?

Maintain your position on the current page when refreshing Angular 4

Arranging numerous items based on date in JavaScript without prior knowledge