Convert the text inside a span element into a key-value object in JavaScript

Question

Convert the text inside a span element into a key-value object in JavaScript

How can I extract and save the text from a span element as key value pairs within a div?

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">ADDITIONAL_WRK</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill">DECIMAL</span>
      </span>
    </div>
  </div>
</div>

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a"> AFFECTMRAPPLIC</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill"> DECIMAL</span>
      </span>
    </div>
  </div>
</div>

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">APPROVED_ON</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill">TIMESTAMP</span>
      </span>
    </div>
  </div>
</div>

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">COMPOSITE</span>
    </div>
  </div>
</div>

To individually access them, you can use the following:

// First span
var firstSpan= document.getElementsByClassName( 'data-diff-basic__class-name__4ngp30a' )
var firstSpanArray = [];
for ( var i = 0; i < firstSpan.length; ++i ) {
    firstSpanArray.push( firstSpan[i].innerText );
}

// Second span
var secondSpan= document.getElementsByClassName( 'sp3-text-overflow-ellipsis sp3-fill' )
var secondSpanArray = [];
for ( var i = 0; i < secondSpan.length; ++i ) {
    secondSpanArray.push( secondSpan[i].innerText);
}

Now, I want to combine firstSpanArray and secondSpanArray using their index into a key value JavaScript object. However, some spans may not have a corresponding second span, leading to an index mismatch.

Can anyone help me modify this query to achieve the following result:

spanCollection = {
  "ADDITIONAL_WRK":"DECIMAL",
  "AFFECTMRAPPLIC":"DECIMAL", 
  "APPROVED_ON":"TIMESTAMP",
  "COMPOSITE":""
}

javascript dom reduce key-value selectors-api

Answer 1

Answer №1

To achieve this, you can select the second div in the first loop by checking with the parent element if it exists. If there is no parent (result 'null'), then set the value to an empty string.

Here's a working example:

var firstSpan = document.getElementsByClassName('data-diff-basic__class-name__4ngp30a');
var spanCollection = {};

for (var i = 0; i < firstSpan.length; ++i) {
  var value_span = firstSpan[i].parentNode.querySelector('.sp3-text-overflow-ellipsis.sp3-fill');
  var span_value = value_span ? value_span.innerText : '';
  var span_key = firstSpan[i].innerText;
  spanCollection[span_key] = span_value;
}

console.log(spanCollection);

[...]

Answer 2

To achieve this, you can select the second div in the first loop by checking with the parent element if it exists. If there is no parent (result 'null'), then set the value to an empty string.

Here's a working example:

var firstSpan = document.getElementsByClassName('data-diff-basic__class-name__4ngp30a');
var spanCollection = {};

for (var i = 0; i < firstSpan.length; ++i) {
  var value_span = firstSpan[i].parentNode.querySelector('.sp3-text-overflow-ellipsis.sp3-fill');
  var span_value = value_span ? value_span.innerText : '';
  var span_key = firstSpan[i].innerText;
  spanCollection[span_key] = span_value;
}

console.log(spanCollection);

[...]

Answer 3

Answer №2

There are multiple ways to accomplish the task at hand.

One method is to use a reduce based approach, where you iterate through an array of nodes obtained from a queried NodeList with each node belonging to the class

.data-diff-basic__class-name__4ngp30a

, these nodes contain the key-name information.

During each iteration step, you would...

Retrieve the key-name from the current node being processed.
```
const key = keyNode.textContent.trim();
```
Fetch the corresponding value-containing node related to each key-containing node. If the value data exists, extract it. Otherwise, default to an empty string. To do this, you can use a combination of Element::querySelector and the optional chaining operator / ?.
```
const value = keyNode.parentNode.querySelector('.sp3-fill')?.textContent.trim() || '';
```

Throughout the entire reduce process, you would aggregate key-value pairs into an initially empty object using Object.assign. The return value of the reducer function would be this object containing the aggregated key-value pairs...

const spanCollection = [
  ...document.querySelectorAll('.data-diff-basic__class-name__4ngp30a')
]
.reduce((result, keyNode) => {

  const key = keyNode
    .textContent.trim();
  const value = keyNode
    .parentNode.querySelector('.sp3-fill')?.textContent.trim() || '';

  return Object.assign(result, { [ key ]: value });

}, {});

console.log({ spanCollection });

.as-console-wrapper { min-height: 100%!important; top: 0; }

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">ADDITIONAL_WRK</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill">DECIMAL</span>
      </span>
    </div>
  </div>
</div>

... (additional HTML code follows) ...

</div>

Another approach could also utilize reduce, but in this case, the data to be reduced is an array of nodes where the text content of each node contains the complete key-value data as a single string after trimming, in the form...

'a_one_word_key     and a lot of value data'

Taking this example value, split using a regex like ...

'a_one_word_key     and a lot of value data'.split(/(\s+)/);

... which preserves the whitespace sequences during splitting, resulting in an array like...

['a_one_word_key', '     ', 'and', ' ', 'a', ' ', 'lot', ' ', 'of', ' ', 'value', ' ', 'data']

By utilizing array destructuring, one can access the necessary key-value data as follows...

const [key, _, ...valueData] = keyValueNode.textContent.trim().split(/(\s+)/);

The variable key will always exist, the underscore represents the optional first split whitespace sequence that is not needed. The valueData array, accessed using the rest property syntax, will default to an empty array regardless of the source data, ensuring defined key-value pairs.

In the object aggregation process similar to the first reduce example, you would now do...

Object.assign(result, { [ key ]: valueData.join('') });

The full example code for this second solution looks as follows...

const spanCollection = [
  ...document.querySelectorAll('.data-diff-basic__class-header__4ngp30a')
]
.reduce((result, keyValueNode) => {

  const [key, _, ...valueData] = keyValueNode.textContent.trim().split(/(\s+)/);

  return Object.assign(result, { [ key ]: valueData.join('') });

}, {});

console.log({ spanCollection });

.as-console-wrapper { min-height: 100%!important; top: 0; }

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">ADDITIONAL_WRK</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill">DECIMAL</span>
      </span>
    </div>
  </div>
</div>

... (more HTML code here) ...

</div>

Answer 4

There are multiple ways to accomplish the task at hand.

One method is to use a reduce based approach, where you iterate through an array of nodes obtained from a queried NodeList with each node belonging to the class

.data-diff-basic__class-name__4ngp30a

, these nodes contain the key-name information.

During each iteration step, you would...

Retrieve the key-name from the current node being processed.
```
const key = keyNode.textContent.trim();
```
Fetch the corresponding value-containing node related to each key-containing node. If the value data exists, extract it. Otherwise, default to an empty string. To do this, you can use a combination of Element::querySelector and the optional chaining operator / ?.
```
const value = keyNode.parentNode.querySelector('.sp3-fill')?.textContent.trim() || '';
```

Throughout the entire reduce process, you would aggregate key-value pairs into an initially empty object using Object.assign. The return value of the reducer function would be this object containing the aggregated key-value pairs...

const spanCollection = [
  ...document.querySelectorAll('.data-diff-basic__class-name__4ngp30a')
]
.reduce((result, keyNode) => {

  const key = keyNode
    .textContent.trim();
  const value = keyNode
    .parentNode.querySelector('.sp3-fill')?.textContent.trim() || '';

  return Object.assign(result, { [ key ]: value });

}, {});

console.log({ spanCollection });

.as-console-wrapper { min-height: 100%!important; top: 0; }

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">ADDITIONAL_WRK</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill">DECIMAL</span>
      </span>
    </div>
  </div>
</div>

... (additional HTML code follows) ...

</div>

Another approach could also utilize reduce, but in this case, the data to be reduced is an array of nodes where the text content of each node contains the complete key-value data as a single string after trimming, in the form...

'a_one_word_key     and a lot of value data'

Taking this example value, split using a regex like ...

'a_one_word_key     and a lot of value data'.split(/(\s+)/);

... which preserves the whitespace sequences during splitting, resulting in an array like...

['a_one_word_key', '     ', 'and', ' ', 'a', ' ', 'lot', ' ', 'of', ' ', 'value', ' ', 'data']

By utilizing array destructuring, one can access the necessary key-value data as follows...

const [key, _, ...valueData] = keyValueNode.textContent.trim().split(/(\s+)/);

The variable key will always exist, the underscore represents the optional first split whitespace sequence that is not needed. The valueData array, accessed using the rest property syntax, will default to an empty array regardless of the source data, ensuring defined key-value pairs.

In the object aggregation process similar to the first reduce example, you would now do...

Object.assign(result, { [ key ]: valueData.join('') });

The full example code for this second solution looks as follows...

const spanCollection = [
  ...document.querySelectorAll('.data-diff-basic__class-header__4ngp30a')
]
.reduce((result, keyValueNode) => {

  const [key, _, ...valueData] = keyValueNode.textContent.trim().split(/(\s+)/);

  return Object.assign(result, { [ key ]: valueData.join('') });

}, {});

console.log({ spanCollection });

.as-console-wrapper { min-height: 100%!important; top: 0; }

<div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip">
  <div class="data-diff-basic__class-row__4ngp30a">
    <div class="data-diff-basic__class-header__4ngp30a">
      <span class="data-diff-basic__class-name__4ngp30a">ADDITIONAL_WRK</span>

      <span class="sp3-tag sp3-intent-danger">
        <span class="sp3-text-overflow-ellipsis sp3-fill">DECIMAL</span>
      </span>
    </div>
  </div>
</div>

... (more HTML code here) ...

</div>

Convert the text inside a span element into a key-value object in JavaScript

Answer №1

Answer №2

Similar questions

Node.js for Streaming Videos

The formatter/render function in Angular Directive fails to refresh

Having trouble retrieving the $scope value in HTML, even though it was assigned within the success function of $http.post

Unable to display MongoDB collection in React application

Mongoose search operation coming up with a blank array

How to use jQuery to set a background image using CSS

Dealing with event delegation on elements that are not nested

Searching in the Kendo Dropdown List using text and value

Retrieve a specified child object within its parent object using a string identifier

Ways to transfer information from the Component to the parent in AngularJS 1.x

Can Javascript (PWA) be used to detect fake GPS or mock GPS in applications?

I'm looking to create a unit test for my AngularJS application

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

Limit the implementation of Angular Material's MomentDateAdapter to strictly within the confines of individual

Tips for swapping out a new line character in JavaScript

Selection Change Event for Dropdown Menu

Reaching out to the Edge: Enhancing the jQuery Slider Experience

Add design to the footer during a specific event using Javascript

Ionic utilized the $http service and was unexpectedly triggered two times

Using Selenium in Java to interact with popup elements