如何根據從 JSON 接收到的數據生成動態表單

Question

我正在嘗試根據以下標准生成動態表單

1. 表單字段必須基於來自 entityTable 數組的 table1 和 table2 鍵的值生成。 有時 table1 和 table2 鍵可能包含多個值。 在這種情況下，我需要基於逗號（，）拆分值並考慮它們的單獨值。
2. 現在，我需要將從 table1 和 table2 鍵接收到的值與 recievedData 對象的鍵進行比較。 如果匹配，那么我需要生成具有相應鍵值的 initialValue 的表單字段。
3. 必須根據 entityTable 數組中 table1_edit 和 table2_edit 的鍵值禁用表單字段。 如果值為 0，則必須禁用表單字段。

這是對象

const data = {
    "recievedData": {
        "pan_number": "3213265",
        "gender": "M",
        "last_name": "45645",
        "pan_status": "VALID",
        "middle_name": "null",
        "rece_pan_num": "435353",
        "first_name": "464",
        "sent_pan_num": "546546",
        "pan_name": "some name",
        "pan_holder_title": "null"
    },
    "questions": [],
    "entityTable": [
        {
            "id": 1,
            "table1": "pan_number",
            "table2": "sent_pan_num,rece_pan_num,pan_status",
            "table1_edit": "1",
            "table2_edit": "0",

        },
        {
            "id": 2,
            "table1": "pan_name",
            "table2": "first_name,middle_name,last_name",                    
            "table1_edit": "1",
            "table2_edit": "0",

        },
        {
            "id": 3,
            "table1": "gender",
            "table2": "pan_holder_title",                    
            "table1_edit": "1",
            "table2_edit": "0",
        }
    ]
}

到目前為止我已經嘗試過，我沒有在這里發布它，因為它可能會導致對我的需求的理解產生混淆。 有人可以幫我解決這個問題嗎？

Answer 1

我假設您是在尋求可行的解決方案而不是編程挑戰。 如果是這樣，請考慮現有的解決方案： https : //github.com/ineffablep/react-schema-form

這個特定的庫允許您完全按照您的需要做，並支持不同類型的輸入（這可能會變得棘手）。 鑒於這是一個選項，您的問題變得更容易解決 - 您只需要將一個 JSON 轉換為另一個。