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

Tips for locating the previous CSS value before it was altered by javascript code

Updating HTML Pages with Dynamic Content

Add axios requests to the axios.all array

Validation of phone numbers based on country codes

Using the setTimeout function in Vue.js to trigger the play of an audio file at a specified

Customize the appearance of Woocommerce's blockUi feature with your

Unable to launch React Native project

Utilizing autosuggest in combination with jQuery ajax consistently generates suggestions with a delay of 1 keystroke

Utilize the useRef hook in React to enable copying text to the clipboard

"Failure to manipulate the style of an HTML element using Vue's

Sending a directive as an argument to a parent directive function

Using a CSS gradient with a variable in React.js - A guide to implementation

Utilizing jQuery for interacting with iframes

Beware, search for DomNode!

How can I reset a CSS position sticky element using JavaScript?

Stop the Sidebar from showing up on certain pages with Next.js

I utilized the `<script src="sample.pdf"></script>` tag in my HTML code and surprisingly, the JavaScript within the PDF document was still able to execute

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Show the GitHub repositories of the user within a React application

What is the best way to link a multi-select element with an array of objects?