轉換嵌套的JSON的HTML

我一直在考慮採取JSON對象（它不會是這一個，可能是或多或少嵌套和內容），並編寫將解析出來，並追加到功能的任務一個html頁面。具體來說，他們會給我一個看起來像這樣的文件，我將不得不從中獲取數據。它可以是一個深度或15個深度。我只是不知道從哪裏開始。我知道我應該使用遞歸或者循環，但是過去那個im完全丟失了。轉換嵌套的JSON的HTML

任何幫助或指針在正確的方向將是有益的，謝謝。

[ 
    { 
    "tag": "section", 
    "content": { 
     "tag": "h2", 
     "content": "Welcome to My Page!" 
    } 
    }, 
    { 
    "tag": "section", 
    "content": [ 
     { 
     "tag": "h3", 
     "content": "My Favorite Things" 
     }, 
     { 
     "tag": "ul", 
     "content": [ 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/200/200'/>" 
      }, 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/201/200'/>" 
      }, 
      { 
      "tag": "li", 
      "content": "<img src='http://placekitten.com/g/200/201'/>" 
      } 
     ] 
     }, 
     { 
     "tag": "p", 
     "content": [ 
      { 
      "tag": "span", 
      "content": "In short, I " 
      }, 
      { 
      "tag": "strong", 
      "content": "just love" 
      }, 
      { 
      "tag": "span", 
      "content": " kittens!" 
      } 
     ] 
     } 
    ] 
    } 
]

來源

2017-01-12 DerekW

由於它的結構，遞歸心中有數。 – Candide

這裏有一個指針：從一個級別的對象開始，忘記嵌套。編寫一個小函數，將上述結構的最小邏輯單元轉換爲適當的HTML元素。沒有循環，沒有任何東西。將該功能添加到您的問題。繼續考慮如何重新使用該函數將項目列表轉換爲HTML元素列表。一旦你有一個可以轉換列表的函數，繼續想想如何編寫第三個函數來轉換列表的列表。 – Tomalak

這就是我在想什麼，但只做過基本的例子遞歸問題。我只有一天的時間來弄清楚這一點，我不知道我是否可能在這個問題上頭腦發熱。 – DerekW

這看起來像一個模板框架的工作。如果你只需要顯示你的數據（單向綁定），那麼如果用戶需要能夠編輯這些值，並且一些很好（易於使用），那麼有很多。

就我個人而言，我會使用像Angular這樣的框架（Angular1或Angular2），因爲它們是完整的框架，可以幫助你做很多事情。也就是說，兩者都可能是矯枉過正的，特別是如果你不熟悉它們，只需要從json創建一些html。

更簡單的解決辦法是使用模板系統，如Mustache或Handlebars。兩者都是偉大的模板系統 - 後者在另一個模塊系統之上。

祝你好運 - 我敢肯定，這將是有趣的，比你怕比較容易。既然你提到的遞歸，是使用，而是讓框架爲你做 - 那麼麻煩且不易出錯:)

來源

2017-01-12 08:53:09

使用document.createElement("tag");功能在你的記憶（var element = document.createElement(currentLevel.tag);）創建一個元素比你可以使用element.appendChild(otherelement);把東西放在裏面。您可以檢查什麼是「內容」 S型（字符串或數組）通過檢查typeof currentLevel.content是「對象」或「串」。

當談到把它寫下來，不僅僅是獲得元素，你想在裏面和它targetElement.appendChild(element);。不過，若你只想HTML代碼，比 var HTMLcode = element.outerHTML;

來源

2017-01-12 09:53:59 WIPocket

這就是：https://jsfiddle.net/ej4ftzcs/

// A recursive function to build DOM tree from a json structure 
function buildTree(tree, container) { 
    tree.forEach(function(node) { 

    var el = document.createElement(node.tag); 

    if (Array.isArray(node.content)) { 
     buildTree(node.content, el); 
    } 
    else if (typeof(node.content) == 'object') { 
     buildTree([node.content], el); 
    } 
    else { 
     el.innerHTML = node.content; 
    } 

    container.appendChild(el); 
    }); 
} 

// Run !!! 
buildTree(tree, document.body);

來源

2017-01-12 09:57:52 AlexM

謝謝你。我幾乎已經做了類似的，但更混亂的方式。 – DerekW

@DerekW我可以問爲什麼你沒有采用模板框架的方式？它並不雜亂，使用更少的代碼和更少的錯誤更容易 - 一個專門爲從json構建html而編寫的框架肯定比從零開始做一些雜亂的事情更好？ –

@PerHornshøj-Schierbeck我不想爲此使用框架，因爲這樣做沒有框架對我來說是一個更大的學習體驗。謝謝您的幫助！完成它，雖然它的超級混亂，我知道我現在可以回頭重寫它，現在我已經明白了邏輯。 – DerekW

轉換嵌套的JSON的HTML

回答

相關問題