獲得使用JavaScript/jQuery的

複雜的嵌套JSON數據的各個層面，我想下面的代碼，以獲得一個複雜的JSON數據數據的各個層面，並試圖頁面上顯示如下獲得使用JavaScript/jQuery的

一級 - 歡迎
第二層次 - 主頁，菜單1，菜單2 ...
三級 - 第1頁，第2頁，頁面父級 - 首頁
四級 - 第11頁，每頁12 forparent級1，
同樣21頁，第20頁forparent級2

JSON：

{ 
    "type": "DIV", 
    "content": [{ 
     "type": "H1", 
     "content": ["Welcome"] 
    }, { 
     "type": "HEADER", 
     "content": ["\n   ", { 
      "type": "DIV", 
      "content": ["\n    ", { 
       "type": "NAV", 
       "content": [{ 
        "type": "DIV", 
        "content": ["\n             ", { 
         "type": "H3", 
         "content": ["Home"] 
        }, { 
         "type": "UL", 
         "content": [{ 
          "type": "LI", 
          "content": [{ 
            "type": "A", 
            "content": ["Page1"], 
            "attributes": { 
             "id": "page1", 
             "class": "tertiaryLink", 
             "tabindex": "0", 
             "href": "https://zzzzzz/Page1.html", 
             "aria-label": "Page1", 
             "role": "treeitem", 
             "aria-setsize": "23", 
             "aria-posinset": "1", 
             "aria-level": "1" 
            } 
           }, 


           { 
            "type": "UL", 
            "content": [{ 
             "type": "LI", 
             "content": [{ 
              "type": "A", 
              "content": ["Page11"], 
              "attributes": { 
               "id": "page1", 
               "class": "tertiaryLink", 
               "tabindex": "0", 
               "href": "https://zzzzzz/Page11.html", 
               "aria-label": "Page12", 
               "role": "treeitem", 
               "aria-setsize": "23", 
               "aria-posinset": "11", 
               "aria-level": "1" 
              } 
             }] 
            }, { 
             "type": "LI", 
             "content": [{ 
              "type": "A", 
              "content": ["Page12"], 
              "attributes": { 
               "id": "page12", 
               "class": "tertiaryLink", 
               "tabindex": "0", 
               "href": "https://zzzzzz/Page12.html", 
               "aria-label": "Page1", 
               "role": "treeitem", 
               "aria-setsize": "23", 
               "aria-posinset": "12", 
               "aria-level": "1" 
              } 
             }] 
            }] 
           } 






          ] 
         }, { 
          "type": "LI", 
          "content": [{ 
           "type": "A", 
           "content": ["Page2"], 
           "attributes": { 
            "id": "page2", 
            "class": "tertiaryLink", 
            "tabindex": "0", 
            "href": "https://zzzzzz/Page2.html", 
            "aria-label": "Page2", 
            "role": "treeitem", 
            "aria-setsize": "23", 
            "aria-posinset": "1", 
            "aria-level": "2" 
           } 
          }] 
         }, { 
          "type": "LI", 
          "content": [{ 
           "type": "A", 
           "content": ["Page3"], 
           "attributes": { 
            "id": "page3", 
            "class": "tertiaryLink", 
            "tabindex": "0", 
            "href": "https://zzzzzz/Page3.html", 
            "aria-label": "Page3", 
            "role": "treeitem", 
            "aria-setsize": "23", 
            "aria-posinset": "1", 
            "aria-level": "3" 
           } 
          }] 
         }] 
        }] 
       }, { 
        "type": "DIV", 
        "content": ["\n             ", { 
         "type": "H3", 
         "content": ["Menu1"] 
        }, { 
         "type": "UL", 
         "content": [{ 
          "type": "LI", 
          "content": [{ 
           "type": "A", 
           "content": ["menuPage1"], 
           "attributes": { 
            "id": "menuPage1", 
            "class": "tertiaryLink", 
            "tabindex": "0", 
            "href": "https://zzzzzz/menu1.html", 
            "aria-label": "Page1", 
            "role": "treeitem", 
            "aria-setsize": "23", 
            "aria-posinset": "1", 
            "aria-level": "1" 
           } 
          }] 
         }, { 
          "type": "LI", 
          "content": [{ 
           "type": "A", 
           "content": ["menuPage2"], 
           "attributes": { 
            "id": "menuPage2", 
            "class": "tertiaryLink", 
            "tabindex": "0", 
            "href": "https://zzzzzz/menu2.html", 
            "aria-label": "menuPage2", 
            "role": "treeitem", 
            "aria-setsize": "23", 
            "aria-posinset": "1", 
            "aria-level": "2" 
           } 
          }] 
         }, { 
          "type": "LI", 
          "content": [{ 
           "type": "A", 
           "content": ["menuPage3"], 
           "attributes": { 
            "id": "menuPage3", 
            "class": "tertiaryLink", 
            "tabindex": "0", 
            "href": "https://zzzzzz/menu3.html", 
            "aria-label": "menuPage3", 
            "role": "treeitem", 
            "aria-setsize": "23", 
            "aria-posinset": "1", 
            "aria-level": "3" 
           } 
          }] 
         }] 
        }] 
       }] 
      }] 
     }] 
    }] 
}

我使用遞歸jQuery來獲取嘗試，但不能得到各級

Codepen網址以供參考：

http://codepen.io/divyar34/pen/oZWGpL

Codepen的預期HTML接近下面提到 https://codepen.io/divyar34/pen/YZVgzr

來源

2017-03-11 divya reddy

注意，在'型的'attributes'：「A」'有重複的'id'屬性' 「第1頁」' – guest271314

你爲什麼使用JSON來傳輸信息，這顯然是更好描述爲HTML結構？ – gyre

你可以在問題中包含預期產生的'html'嗎？ – guest271314

需要更多jQuery()。使用jQuery(html, attributes)。請注意，如果javascript在堆棧小節中出現確切預計的結果，則不確定html;預期html未出現在問題中，但您應該能夠模擬模式以實現準確的預期結果。替代重複id在"page1"爲"page11"，增加tabindex值的每個"A"類型，或<a>元素。

該方法應使用的代碼和行類似量html內容追加到document，而不是解析嵌套的數組，其中陣列的元件可以是字符串和對象的費力的任務。

$("#c2") 
 
    .append(
 
    $("<DIV>", { 
 
     "html": $("<H1>", { 
 
     "html": "Welcome" 
 
     }) 
 
    }), 
 
    $("<HEADER>", { 
 
     "html": "\n", 
 
     "append": $("<DIV>", { 
 
     "html": "\n", 
 
     "append": $("<NAV>", { 
 
      "html": $("<DIV>", { 
 
      "html": "\n", 
 
      "append": $("<H3>", { 
 
       "html": "Home" 
 
      }) 
 
      }) 
 
     }) 
 
     }) 
 
    }), 
 
    $("<UL>", { 
 
     "html": $("<LI>", { 
 
     "html": $("<A>", { 
 
      "html": "Page1", 
 
      "id": "page1", 
 
      "class": "tertiaryLink", 
 
      "tabindex": "0", 
 
      "href": "https://zzzzzz/Page1.html", 
 
      "aria-label": "Page1", 
 
      "role": "treeitem", 
 
      "aria-setsize": "23", 
 
      "aria-posinset": "1", 
 
      "aria-level": "1" 
 
     }) 
 
     }) 
 
    }), 
 
    $("<UL>", { 
 
     "html": $("<LI>", { 
 
     "html": $("<A>", { 
 
      "html": "Page11", 
 
      "id": "page11", 
 
      "class": "tertiaryLink", 
 
      "tabindex": "1", 
 
      "href": "https://zzzzzz/Page1.html", 
 
      "aria-label": "Page1", 
 
      "role": "treeitem", 
 
      "aria-setsize": "23", 
 
      "aria-posinset": "11", 
 
      "aria-level": "1" 
 
     }) 
 
     }) 
 
    }), 
 
    $("<UL>", { 
 
     "html": $("<LI>", { 
 
     "html": $("<A>", { 
 
      "html": "Page12", 
 
      "id": "page12", 
 
      "class": "tertiaryLink", 
 
      "tabindex": "2", 
 
      "href": "https://zzzzzz/Page11.html", 
 
      "aria-label": "Page11", 
 
      "role": "treeitem", 
 
      "aria-setsize": "23", 
 
      "aria-posinset": "12", 
 
      "aria-level": "1" 
 
     }) 
 
     }) 
 
    }), 
 
    $("<DIV>", { 
 
     "html": $("<H3>", { 
 
     "html": "Welcome" 
 
     }) 
 
    }), 
 
    $("<UL>", { 
 
     "html": $("<LI>", { 
 
     "html": $("<A>", { 
 
      "html": "menuPage1", 
 
      "id": "menuPage1", 
 
      "class": "tertiaryLink", 
 
      "tabindex": "3", 
 
      "href": "https://zzzzzz/menu1.html", 
 
      "aria-label": "Page1", 
 
      "role": "treeitem", 
 
      "aria-setsize": "23", 
 
      "aria-posinset": "1", 
 
      "aria-level": "1" 
 
     }) 
 
     }) 
 
    }), 
 
    $("<UL>", { 
 
     "html": $("<LI>", { 
 
     "html": $("<A>", { 
 
      "html": "menuPage2", 
 
      "id": "menuPage2", 
 
      "class": "tertiaryLink", 
 
      "tabindex": "4", 
 
      "href": "https://zzzzzz/menu2.html", 
 
      "aria-label": "Page1", 
 
      "role": "treeitem", 
 
      "aria-setsize": "23", 
 
      "aria-posinset": "1", 
 
      "aria-level": "2" 
 
     }) 
 
     }) 
 
    }), 
 
    $("<UL>", { 
 
     "html": $("<LI>", { 
 
     "html": $("<A>", { 
 
      "html": "menuPage3", 
 
      "id": "menuPage3", 
 
      "class": "tertiaryLink", 
 
      "tabindex": "5", 
 
      "href": "https://zzzzzz/menu1.html", 
 
      "aria-label": "Page1", 
 
      "role": "treeitem", 
 
      "aria-setsize": "23", 
 
      "aria-posinset": "1", 
 
      "aria-level": "1" 
 
     }) 
 
     }) 
 
    }) 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div id="c2"></div>

來源

2017-03-11 21:31:28 guest271314

我試圖將嵌套的json轉換爲html –

@divyareddy是的，您可以格式化或解析'JSON '在單次調用時傳遞給'jQuery（html，attributes）'的參數。 – guest271314

當解析''html（'，''，{html，attributes}）'''html'，'append' for'content'屬性時，或者調整'JSON'以將參數格式化爲'jQuery（）' – guest271314

獲得使用JavaScript/jQuery的

回答

相關問題