從json選項生成html

Question

我想從var options = {}動態創建選項卡html數據。

我被困在tabs_html()函數，我必須迭代選項並創建html.see的嵌套數據。

我不想在js中使用html代碼，而是使用像$('<ul/>'和$('<li/>'這樣的對象來創建它。

JS：JSFIDDLE

var structure = [ 
{ 
    "title": "tabs-1", 
    "data": { 
     "type": "t1", 
     "title": "title hover" 
    }, 
    "content": "Some Content" 
}, 
{ 
    "title": "tabs-2", 
    "data": { 
     "type": "t2", 
     "title": "title2 hover" 
    }, 
    "content": "Some Content2" 
}]; 

function tabs_html(structure) { 
    var id = "tabs"; 
    var $wrapper_div = $('<div/>', { 
     id: id 
    }); 
    $.each(structure) { 
     // make ul li and div 
     // Not use html , instead use objects like $('<ul/>' and $('<li/>' 
     // id of li`s will be id+_1 id+2 etc 
    } 
    $wrapper_div.append(above_each_data) 
    return $wrapper_div; 
} 

$("body").append(tabs_html(structure)); 

樣本HTML輸出：

<!-- Sample Output 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1" data-type="t1" data-title="title hover" >tabs-1</a> </li> 
     <li><a href="#tabs-2" data-type="t2" data-title="title2 hover" >tabs-2</a> </li> 
    </ul> 
    <div id="tabs-1"></div> 
    <div id="tabs-2"></div> 
</div> 
--> 

Answer 1

我希望這可以幫助您:)

var structure = [ 
    { 
     title: "tabs-1", 
     data: { 
      type: "t1", 
      title: "title hover" 
     }, 
     content: "Some Content" 
    }, { 
     title: "tabs-2", 
     data: { 
      type: "t2", 
      title: "title2 hover" 
     }, 
     content: "Some Content2" 
    } 
]; 

function tabs_html(structure) { 
    var $wrapper_div = $('<div/>').attr('id', 'tabs'); 
    var $list = $("<ul/>"); 
    $wrapper_div.append($list); 
    $.each(structure, function(i, spec){ 
     var $tab = $("<div/>") 
      .attr('id', spec.title) 
      .text(spec.content); 
     var $item = $("<li/>"); 
     var $link = $("<a/>") 
      .attr('href', '#'+spec.title) 
      .attr('data-type', spec.data.type) 
      .attr('data-title', spec.data.title) 
      .text(spec.title); 
     $item.append($link); 
     $list.append($item); 
     $wrapper_div.append($tab); 
    }); 
    return $wrapper_div; 
} 

$("body").append(tabs_html(structure)); 

JSFiddle

Answer 2

您可以使用以下js函數生成html代碼。

var newElm = function(obj) { 
    // If not a good JSON, dont do anything 
    if (!obj || !obj.type) { 
    return; 
    } 
    // Create the DOM element as per type attribute 
    var elm = document.createElement(obj.type), prop; 
    console.log('TYPE:' + obj.type); 
    // For all properties in the JSON 
    for (prop in obj) { 
    if (obj.hasOwnProperty(prop)) { 
     // If it is type, no need to handle, already done. Skip and continue. 
     if (prop === 'type') { 
     console.log('Skip TYPE!'); 
     continue; 
     } 
     // It is content, create the content 
     if (prop === 'content') { 
     // If the value is string, create a text node 
     if (typeof obj[prop] === 'string' || 
    typeof obj[prop] === 'number') { 
      console.log('CONTENT is Text:' + obj[prop]); 
      elm.appendChild(document.createTextNode(obj[prop])); 

     } 
     // If it is a list, iterate and handle recursively 
     else if (Array.isArray(obj[prop])) { 
      console.log('CONTENT is List:' + JSON.stringify(obj[prop])); 
      var tempArray = obj[prop]; 
      var i = 0, 
      l = tempArray.length; 
      for (; i < l; i++) { 
      // Fixed for a Node appendChild error 
      if (typeof tempArray[i] === 'string') { 
       elm.innerHTML += tempArray[i]; 
      } else { 
       elm.appendChild(newElm(tempArray[i])); 
      } 
      } 
     } 
     // Otherwise its an object, handle recursively 
     else { 
      console.log('CONTENT is Element:' + JSON.stringify(obj[prop])); 
      elm.appendChild(newElm(obj[prop])); 
     } 
     } 
     // Otherwise it is an attribute, add the attribute 
     else { 
     elm.setAttribute(prop, obj[prop]); 
     } 
    } 
    } 
    return elm; 
}; 

示例輸入JSON如下所示。

var innerhtml = { 
    type: 'b', 
    content: ['This is BOLD text.', { 
    type: 'i', 
    content: ' Italics came from Italy? Its 35px and bold too.', 
    style: 'font-size:35px;' 
    }] 
}; 

var htmlArr = { 
    type: 'div', 
    content: { 
    type: 'p', 
    content: ['Simple text with no formatting.', innerhtml, {type : 'img', src : '//www.gravatar.com/avatar/476914f28548ce41b3b7b2c5987720a9/?default=&s=64'}] 
    } 

};