Help With Array Manipulation Logic?

Hi all,

Working on a little project to help learn how to digest JSON and play with array manipulation. Attempting to transform this data.

I have this pretty much worked out, but am having a lot of trouble with grouping the various ‘group’ arrays into separate tables according to their expiration date.

The issue I have is that I can’t work out the logic to bucket the groups with unknown size into the different date categories.

Would love it if someone could take a peek, critique what I have, and point me into a direction. Pretty much stuck after a few days of working it out.

CodePen

Snippet of what I have to render the table (currently just repeats the same info in each table though it should be different. So far have been only able to do that or return all the info under each date over and over again)

 //Render Table with Selected Data
      let list = dates.map((date, i) => {
        return `<div class="table-responsive">
      <table class="table table-sm table-hover table-striped table-dark">
        <thead>
        <tr><th colspan=7>SHORT STRANGLES  ${date
          .toUpperCase()
          .replace(":", "   |   ")} Days to Expiration</th></tr>
        <tr><th>PREMIUM</th>
        <th>PUT</th>
        <th>PUT MARK</th>
        <th>CALL</th>
        <th>CALL MARK</th>
        <th>BREAK EVEN LOW</th>
        <th>BREAK EVEN HIGH</th>
        </tr>
        </thead>
        <tbody>
        ${strikes[i].map((group, j) => {
          console.log(groups[j]);
          return `<tr>
          <td>$${groups[j][1]}</td>
            <td>$${groups[j][2][0][1]}</td>
            <td>$${groups[j][2][0][3]}</td>
            <td>$${groups[j][2][1][1]}</td>
            <td>$${groups[j][2][1][3]}</td>
            <td>$${groups[j][3][1]}</td>
            <td>$${groups[j][3][3]}</td>
            </tr>`;
        })}
        </tbody>
        </table>
        </div>`;
      });

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.