如何在React中比較和呈現多個JSON映射之間的資料？

假設我有 3 組不同的資料，每組代表一個不同的“站點”。鍵相同但值不同。

資料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
        }
    }
}

資料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
        }
    }
}

資料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
        }
    }
}

我正在嘗試為charm-rev我擁有的每個“站點”中的每個應用程式動態呈現。

到目前為止，我已經設法通過資料 1映射并使用以下代碼成功地輸出應用程式版本：

索引.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 class="accordion-item" key={key}>
                            <h2 class="accordion-header" id={"heading"   key}>
                                <button class="accordion-button collapsed" 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} class="accordion-collapse collapse show" aria-labelledby={"heading"   key} data-bs-parent="#accordionData">
                                <div class="accordion-body">
                                    <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;

我將如何映射剩余的資料集并并排呈現它們的版本，以便我可以直觀地比較版本是否相同？

uj5u.com熱心網友回復：

你喜歡這個解決方案嗎？

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

標籤：

上一篇：Exiftool用Python匯出JSON

下一篇：如何通過Python更新json檔案中的鍵值