将json解析为HTML - 这段代码是如何工作的 [英] Parse json to HTML - how does this code works

问题描述

这是完整的代码

< script> 
 $（ document ）。ready（ function （）{
 
 $（ ＃getMessage）。on（  点击， function （）{
 $ .getJSON（  / json / cats.json， function （ json）{
 
  var  html =  ; 
  //  仅更改此行下方的代码。 
  / *   json.forEach（function（itm）{html ='< code>'+ JSON。 stringify（json）+'< / code>';}）; * /  
 json.forEach（ function （val ）{
  var  keys = Object.keys（val）; 
 html + =  < div class ='cat'>; 
 keys.forEach（ function （key）{
 html + =  < span class =code-string>  + key +   ：  + val [key] +  < br>; 
 }）; 
 html + =  < / div>< br>; 
}）; 
 
 
  //  仅更改此行以上的代码。 
 
 $（ 。message）。html（html）; 
 
}）; 
}）; 
}）; 
< / script> 
 
< div  class  =  容器流体> 
< div 类 =  行文本-center> 
< h2> Cat照片查找器< /   h2  >  
 < /   div  >  
< div  class  =  < span class =code-string> row text-center> 
< div  class  =   col- xs-12好消息> 
消息将在此处
 < /   div  >  
 < /   div  >  
< div 类 =   row text-center> 
< div  class  =   col- XS-12\" > 
< button id =   getMessage  class  =   btn btn-primary> 
获取消息
 < /  按钮 >  
 < /   div  >  
 < /   div  >  
 < /   div  >  

有人可以解释一下这段代码是如何工作的。如果你可以为每一行添加评论，那将是很棒的。我想了解每行代码后会发生什么。

  var  html =  ; 
  //  仅更改此行下方的代码。 
  / *   json.forEach（function（itm）{html ='< code>'+ JSON.stringify（json）+'< /代码>';}）; * /  
 json.forEach（ function （val）{
  var  keys = Object.keys（val）; 
 html + =   < div class ='cat'>; 
 keys.forEach（ function （key）{
 html + =    + key +   ： + val [key] +  < br>; 
}）; 
 html + =  < / DIV GT&;<峰; br>中; 
 

我的尝试：



我试过在gitter.im上问过它。但是无法理解。我也看了一下stackoverfloW。但是在那里没有理解。

解决方案

（ document ）。ready（ function （）{

（ ＃getMessage ）。on（ 点击， function （）{

.getJSON（ / json /cats.json， function （json）{

var html = ;
/ / 仅更改此行下方的代码。
/ * json.forEach（function（itm）{html ='< code>'+ JSON.stringify（json）+'&l吨; /代码>'; }）; * /
json.forEach（ function （val）{
var keys = Object.keys（val）;
html + = < div class ='cat'>;
keys.forEach（ function （key）{
html + = + key + ： + val [key] + < br>;
}）;
html + = < / div>< br>;
}）;


// 只更改此行以上的代码。

Here's the ful code

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
         /*json.forEach(function (itm ) {  html = '<code>'+JSON.stringify(json)+'</code>';  });*/
        json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "" + key + ": " + val[key] + "<br>";
  });
  html += "</div><br>";
});
      
        
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

can someone explain me how this code is working. It will be awesome if you can add comment to every line. I want to understand what happens after every line of code.

var html = "";
       // Only change code below this line.
        /*json.forEach(function (itm ) {  html = '<code>'+JSON.stringify(json)+'</code>';  });*/
       json.forEach(function(val) {
 var keys = Object.keys(val);
 html += "<div class = 'cat'>";
 keys.forEach(function(key) {
   html += "" + key + ": " + val[key] + "<br>";
 });
 html += "</div><br>";

What I have tried:

I have tried asking it on gitter.im. But wasnt able to understand. I also looked at stackoverfloW. But didnt understand it there.

解决方案

(document).ready(function() {

("#getMessage").on("click", function() {

.getJSON("/json/cats.json", function(json) { var html = ""; // Only change code below this line. /*json.forEach(function (itm ) { html = '<code>'+JSON.stringify(json)+'</code>'; });*/ json.forEach(function(val) { var keys = Object.keys(val); html += "<div class = 'cat'>"; keys.forEach(function(key) { html += "" + key + ": " + val[key] + "<br>"; }); html += "</div><br>"; }); // Only change code above this line.

这篇关于将json解析为HTML - 这段代码是如何工作的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！