Лучшая практика для создания html из json/js объекта?

Question

Когда я получаю АЯКС ответ от API, я получаю жесткий JSon структуру:

{ 
    object: { 
     key: value, 
     key: value, 
     .... 
     key(array_of_objects): { 
      key: value, 
      key: value, 
     }, { 
      key: value, 
      key: value, 
     }, { 
      key: value, 
      key: value, 
     } 
    } 

} 

Теперь я делаю:

function render(json) { 
    var data = $.parseJSON(json); 
    var html = ""; 

    html += "<h1>Hello"+data.key+"</h1>"; 
    html += "<h2>Your data:</h2>"; 
    html += "<ul>"; 

    var data_array= ""; 

    $.each(data.array_of_objects, function(index, val) { 
    data_array += "<li>" + val.key + "</li>"; 
    }); 

    html += data_array+"<ul>" 

    return html; 
} 

$.ajax({ 
    type: "POST", 
    url: apiUrl, 
    data: request, 
    success: function(obj, xr, res) { 
     $(".content").append(render(obj)); 
    } 
}) 

Я знаю, что с помощью плохое решение, потому что мой код запуталась и трудно расширяемый.

И я хочу разделить логику js и html.

Что является лучшим решением для этой ситуации?

Answer 1

Вы ищете клиентскую библиотеку. Их много и очень много. Одним из которых является небольшое улучшение от backbone.js, которое даст вам компоненты, которые вы можете (повторно) визуализировать и моделировать для хранения данных. Другой широко распространенный angular.js и причины реакция.

Если вы не используете ни одно из них, то делать то, что вы делаете, на самом деле очень часто. Вы также можете попробовать пойти с минималистичным шаблонизатором как нефрита или подчеркивания шаблонов