Lets say I have 3 different sets of data, each one represents a different "site". The keys are the same but the values differ.

Data 1:

{
    "model": {
        "site": "data1",
        "instance": 3.0
    },
    "applications": {
        "a": {
            "charm-rev": 1.1.1
        }
        "b": {
            "charm-rev": 2.2.2
        },
        "c": {
            "charm-rev": 3.3.3
        }
    }
}

Data 2:

{
    "model": {
        "site": "data2",
        "instance": 2.0
    },
    "applications": {
        "a": {
            "charm-rev": 8.8.8
        }
        "b": {
            "charm-rev": 2.2.5
        },
        "c": {
            "charm-rev": 3.3.3
        }
    }
}

Data 3:

{
    "model": {
        "site": "data3",
        "instance": 1.0
    },
    "applications": {
        "a": {
            "charm-rev": 6.5.5
        }
        "b": {
            "charm-rev": 2.2.2
        },
        "c": {
            "charm-rev": 2.2.3
        }
    }
}

I am trying to dynamically render the charm-rev for each application across each "site" that I have.

So far I have managed to map through Data 1 and output the applications versions with great success using the following code:

index.js:

import React, { Component } from "react";

import jsondata from '../../assets/json/output.json';
import dev1data from '../../assets/json/dev1.json';
import dev2data from '../../assets/json/dev2.json';
 
class DataTable2 extends Component {
    constructor(props) {
        super(props);
 
        this.state = {
            "data": jsondata,
            "dev1data": dev1data,
            "dev2data": dev2data
        }

        //console.log(this.state.data);
    }

render() {
        const { data, dev1data, dev2data } = this.state;

        return (
            <div className="accordion" id="accordionData">
                {Object.keys(data.applications).map(key => {
                    const charms = data.applications[key];
 

                    return (
                        <div  key={key}>
                            <h2  id={"heading"   key}>
                                <button  type="button" data-bs-toggle="collapse" data-bs-target={"#collapse"   key} aria-expanded="false" aria-controls={"collapse_" key}>
                                    {charms["charm"]}
                                </button>
                            </h2>
                            <div id={"collapse"   key}  aria-labelledby={"heading"   key} data-bs-parent="#accordionData">
                                <div >
                                    <p><strong>Site: </strong> {data.model.controller} <strong>Rev: </strong> {charms["charm-rev"]}</p>
                                    <p><strong>Site:</strong> {dev1data.model.controller} <strong>Rev: </strong> </p>
                                   <p><strong>Site:</strong> {dev2data.model.controller} <strong>Rev: </strong> </p>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}

export default DataTable2;

How would I map through the remaining sets of data and render their versions side by side so I can visually compare if the versions are the same?

CodePudding user response：

How do you like this solution?

  render() {
    const { data, dev1data, dev2data } = this.state;

    const sites = [data, dev1data, dev2data];
    const keys = Object.keys(data.applications);
    return (
      <table>
        <tr>
          {sites.map((s) => (
            <td>{s.model.site}</td>
          ))}
        </tr>
        <tr>
          {sites.map((s) => (
            <td>{s.model.instance}</td>
          ))}
        </tr>
        {keys.map((k) => (
          <tr>
            {sites.map((s) => (
              <td>{s.applications[k]["charm-rev"]}</td>
            ))}
          </tr>
        ))}
      </table>
    );
  }