parse span element InnerText to a javascript key value object

Question

I have the following div element and i would like to parse the span text save it as key value pair.

<div
  class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip"
  style="height: 29px"
>
  <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"
  style="height: 29px"
>
  <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"
  style="height: 29px"
>
  <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"
  style="height: 29px"
>
  <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>

I am able to get them individually using 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 );

// var 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 the index into a key value javascript object,but the issue is for some the second span is not there and so the index is not a one to one match. can any help me expand this query so that i get something like this:

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

Answer 1

You can achieve this by selecting the second div in the first loop by "asking" the parent if it has one. And if not (result 'null') set the value to an empty string.

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);

 <div class="data-diff-span__composite-list-item__18c5zip data-diff-core__highlight-area__19c0zip" style="height: 29px"> <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" style="height: 29px"> <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" style="height: 29px"> <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" style="height: 29px"> <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>