如何动态地将JSON数据转换成HTML元素

{ 
 
     "top10": [ 
 
      { 
 
        "state": "red", 
 
        "claimed": true, 
 
        "branch": "release-2.3.4", 
 
        "job": "sdk", 
 
        "culprit": "Hansi Meier" 
 
      }, 
 
      { 
 
        "state": "blue", 
 
        "claimed": true, 
 
        "branch": "master", 
 
        "job": "ibeo-cloud", 
 
        "culprit": "Karl Gustavo" 
 
      }, 
 
      { 
 
        "state": "yellow", 
 
        "claimed": false, 
 
        "branch": "feature-abc", 
 
        "job": "appbase", 
 
        "culprit": "MAfred Auch" 
 
      } 
 
     ] 
 
}

<nav class="side-navbar"> 
 
     <div class="title"> 
 
      <h1>Top 10</h1> 
 
     </div> 
 

 
     <ul class="list-group"> 
 
      <a class="item d-flex align-items-center"> 
 
       
 
       <i class="fa fa-caret-up" style="font-size:48px;color:red"></i> 
 
       <div class="item d-table-cell"> 
 
       <i id='topbranch'></i> 
 
       <i id='topjob'></i> 
 
       <i id='topculprit'></i> 
 
       </div> 
 
       <i class="fa fa-refresh" style="font-size:30px;color:yellow"></i> 
 
       
 
      </a> 
 
     
 
     </ul> 
 
</nav>

我想我的JSON数据插入到HTML elemnts 例如TOP10 [0] .branch应该进入HTML的id topbranch。它应该循环。请看图像应该如何来。请告诉我如何做javascript.it会很好，如果你给jsfiddle链接

来源

2017-10-10 Rajesh Choudary

您需要将所有id更改为class为topbranch, topjob and topculprit，因为您将通过循环创建多个元素。对于HTML文档中的任何元素，id应该是唯一的。

希望以下示例适合您。你可以在JS代码中找到评论。您需要编写自己的CSS来根据屏幕截图显示项目。我在ul元素下添加了li元素。

var data = { 
 
\t "top10": [ 
 
\t \t { 
 
\t \t \t "state": "red", 
 
\t \t \t "claimed": true, 
 
\t \t \t "branch": "release-2.3.4", 
 
\t \t \t "job": "sdk", 
 
\t \t \t "culprit": "Hansi Meier" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "state": "blue", 
 
\t \t \t "claimed": true, 
 
\t \t \t "branch": "master", 
 
\t \t \t "job": "ibeo-cloud", 
 
\t \t \t "culprit": "Karl Gustavo" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "state": "yellow", 
 
\t \t \t "claimed": false, 
 
\t \t \t "branch": "feature-abc", 
 
\t \t \t "job": "appbase", 
 
\t \t \t "culprit": "MAfred Auch" 
 
\t \t } 
 
\t ] 
 
}; 
 

 
$.each(data.top10, function (i, el) { 
 
\t var ele = $(".list-group a.item:first").parent().clone(); //Clone the first element 
 
\t ele.find(".topbranch").text(el.branch).css("color", el.state); //Update values 
 
\t ele.find(".topjob").text(el.job); 
 
\t ele.find(".topculprit").text(el.culprit); 
 
\t $(".list-group").append(ele); //Append cloned element to `list-group` 
 
}) 
 
$(".list-group a.item:first").parent().remove(); //Remove first li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<nav class="side-navbar"> 
 
\t <div class="title"> 
 
\t \t <h1>Top 10</h1> 
 
\t </div> 
 

 
\t <ul class="list-group" style="list-style-type: none;"> 
 
\t \t <li> 
 
\t \t \t <a class="item d-flex align-items-center" style="display: flex; justify-content: space-evenly;"> 
 
\t \t \t \t <i class="fa fa-caret-up" style="font-size:48px;color:red"></i> 
 
\t \t \t \t <div class="item d-table-cell"> 
 
\t \t \t \t \t <i class='topbranch'></i><br/> 
 
\t \t \t \t \t <i class='topjob'></i><br/> 
 
\t \t \t \t \t <i class='topculprit'></i><br/> 
 
\t \t \t \t </div> 
 
\t \t \t \t <i class="fa fa-refresh" style="font-size:30px;color:yellow"></i> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t </ul> 
 
</nav>

来源

2017-10-10 08:37:25

超级兄弟。它为我工作。非常感谢您 –

如果我需要更多的帮助，请联系您 –

我可能知道为什么要给var ele = $（“。list-group a.item：first”）。parent（）。clone（）;为什么它不使用这个var ele = $（“。list-group：first”）。parent（）。clone（）;什么是重要的。 item –

尝试使用具有数据绑定功能的现代JavaScript框架，它很容易实现和优雅，你可以选择vue，Angular或反应。

来源

2017-10-10 07:53:24 winterfall

是的，但我已经在简单的JavaScript和jQuery –

那我建议你可以使用Vue的框架，这是一个渐进的框架开工项目，你可以在脚本标签添加VUE JS，并刚刚新Vue对象将完成数据绑定的东西，检查出你好世界教程，https://vuejs.org/v2/guide/ – winterfall

谢谢我会研究它 –

如果你有json数组，你需要遍历所有的对象并读取它们的属性。

请试试这个。

<!DOCTYPE html> 
<html> 
<body> 

<p id="demo"></p> 

<script> 

    var myObj, i, j, x = ""; 
    myObj = { 
     "top10": [ 
        { 
         "state": "red", 
         "claimed": true, 
         "branch": "release-2.3.4", 
         "job": "sdk", 
         "culprit": "Hansi Meier" 
        }, 
        { 
         "state": "blue", 
         "claimed": true, 
         "branch": "master", 
         "job": "ibeo-cloud", 
         "culprit": "Karl Gustavo" 
        }, 
        { 
         "state": "yellow", 
         "claimed": false, 
         "branch": "feature-abc", 
         "job": "appbase", 
         "culprit": "MAfred Auch" 
        } 
     ] 
    } 

    for (i in myObj.top10) { 
    x += "<h2>" + myObj.top10[i].branch + "</h2>"; 
    x += "<h2>" + myObj.top10[i].job + "</h2>"; 
    x += "<h2>" + myObj.top10[i].culprit + "</h2>"; 
    } 

    document.getElementById("demo").innerHTML = x; 

</script> 

</body> 
</html>

来源

2017-10-10 08:00:57

你可以尝试一些这样的事情迭代你的数据。

var html; 

$.each(data.top10,function(key1,value1){ 
html="<div><i id='topbranch'>"+value1.state+"</i><br>" 
      +"<i id='topjob'>"+value1.job+"</i><br>" 
      +" <i id='topculprit'>"+value1.culprit+"</i></div><br>" 
$("#divId").append(html) 
})

这里是小提琴：https://jsfiddle.net/6w11Ln05/3/
您可以添加相应的设计。

来源

2017-10-10 08:11:27

好一个@Vipul辛格 – 2017-10-10 08:14:05

它的帮助，但问题是如果你追加，所有的名字都在一个块中。我需要得到json = 1块的第一个循环，json = next块的第二个循环。 –

这是因为我在一个div中添加了如果你想在单独的块中动态添加html代码中的div并添加CSS来正确设计。 –

如何动态地将JSON数据转换成HTML元素

回答

相关问题