0

JS を使用して HTML ページを作成しようとしています。HTML に入力する必要がある内容の詳細は、サーバーから json オブジェクトで送信されます。これで、json オブジェクトは、基本的に dom 構造を模倣するような方法で構造化され、オブジェクトを反復処理して、そこから個々の html 要素データをフェッチし、HTML 文字列をレンダリングします。この問題は、再帰関数を使用してこのオブジェクトを実行すると発生します。スタック超過エラーが発生します。これは、ブラウザのスタック サイズの制限によるものだと思います。スクリプトを失敗させることなく、このオブジェクトを繰り返し処理してページを作成できる最善の方法を理解したいと思います。

pageObj Structure ->

//only a representation of object, the size is much larger.

{ "Default" : { "#text" : [ "\n  ",
          "\n"
        ],
      "MainForm" : { "#text" : [ "\n    ",
              "\n    ",
              "\n  "
            ],
          "shippingInfo" : { "#text" : [ "\n      ",
                  "\n      ",
                  "\n      ",
                  "\n      ",
                  "\n      ",
                  "\n      ",
                  "\n      ",
                  "\n    "
                ],
              "@attributes" : { "title" : "Shipping Information",
                  "type" : "FormBlock"
                },
              "Row" : [ { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "fName" : { "@attributes" : { "placeHolder" : "Enter First Name",
                            "title" : "First Name",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "lName" : { "@attributes" : { "placeHolder" : "Enter Last Name",
                            "title" : "Last Name",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "addr1" : { "@attributes" : { "title" : "Address 1",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "addr2" : { "@attributes" : { "title" : "Address 2",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n        ",
                        "\n      "
                      ],
                    "state" : { "@attributes" : { "title" : "State",
                            "type" : "text"
                          } },
                    "zipCode" : { "@attributes" : { "title" : "Zip Code",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n        ",
                        "\n      "
                      ],
                    "country" : { "@attributes" : { "title" : "Country",
                            "type" : "text"
                          } },
                    "phone" : { "@attributes" : { "title" : "Phone",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n        ",
                        "\n        ",
                        "\n        ",
                        "\n      "
                      ],
                    "day10" : { "@attributes" : { "title" : "10 day Shipping ($3)",
                            "type" : "radio"
                          } },
                    "day5" : { "@attributes" : { "title" : "5 Shipping ($10)",
                            "type" : "radio"
                          } },
                    "free" : { "@attributes" : { "title" : "Free Shipping ($0)",
                            "type" : "radio"
                          } },
                    "overNight" : { "@attributes" : { "title" : "One day Shipping ($20)",
                            "type" : "radio"
                          } }
                  }
                ]
            },
          "userInfo" : { "#text" : [ "\n      ",
                  "\n      ",
                  "\n      ",
                  "\n    "
                ],
              "@attributes" : { "title" : "User Information",
                  "type" : "FormBlock"
                },
              "Row" : [ { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "TextBox" : { "@attributes" : { "placeHolder" : "Select an username",
                            "title" : "Username",
                            "type" : "text"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "TextBox" : { "@attributes" : { "placeHolder" : "Select a password",
                            "title" : "Password",
                            "type" : "password"
                          } }
                  },
                  { "#text" : [ "\n        ",
                        "\n      "
                      ],
                    "TextBox" : { "@attributes" : { "placeHolder" : "Eg: name@gmail.com",
                            "title" : "Email",
                            "type" : "text"
                          } }
                  }
                ]
            }
        }
    } }

このオブジェクトを反復するには、以下の手法を使用します。

function iterateJsonObj(obj) {
    for(key in obj) {
        if(!obj.hasOwnProperty(key) || key=="#text") {
            continue;
        }
        else if(obj[key]["@attributes"]!=null)
        {
            htmlStr += createHTMLStr(obj[key], key);
        }

        iterateJsonObj(obj[key]);
    }
}

この質問が理にかなっていることを願っています。

4

1 に答える 1

2

これは、縮退した再現ケースです。

iterateJsonObj("Some text");

何が起こっているか分かりますか？for ループは、文字列を 1 文字の部分文字列の配列と同様に扱うようです。"Shipping"[0] は、それ自体が文字列である "S" です...

これを修正するには、この方法で反復する前に、typeof obj[key] === "object" をテストすることをお勧めします。

また、単体テストを作成します。彼らはあなたの人生を楽にします。:)

于 2013-03-01T07:25:30.590 に答える