Question

我可能正在做一些非常愚蠢的事情，我知道这已经被一千种不同的方式问到了。我想将信息，标题和描述放入HTML中。它只是在每个div中重复相同的信息，而不是填充其他节点。我的JSON对象，$。each循环和HTML都在下面。谢谢

var data = {
"available": true,
"screens": [{
        "id": "s01",
        "type": "Selector",
        "config": {
            "views": [{
                "id": "sintel",
                "type": "selectorItem",
                "thumbnail": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/img/thumb_sintel.png",
                "title": "Sintel",
                "description": "Small video. HTML5, native controls, start poster. Bottom, right social. Video + grid",
                "info": "00:51"
            }, {
                "id": "bbb",
                "type": "selectorItem",
                "thumbnail": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/img/thumb_bbb.png",
                "title": "Big Buck Bunny",
                "description": "Large video. HTML5, custom controls, social hover. Video + replay",
                "info": "00:33"
            }, {
                "id": "walle",
                "type": "selectorItem",
                "thumbnail": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/thumb_walle.png",
                "title": "WALL-E",
                "description": "Small video. Youtube, custom controls. Left social. Video + carousel.",
                "info": "02:30"
           }]
        }
    }
]
}

$.each(data.screens, function(index, element) {

       $(".container").find('.card-info').text(element.config.views[0].info);
       $(".container").find('.card-title').text(element.config.views[0].title);
       $(".container").find('.card-description').text(element.config.views[0].description);
});

<!--This is the HTML-->
<div class="container">
 <div class="row">    
    <div class="col-md-6 ">
        <div class="card">
            <div class="card-image">
                <div  class="embed-responsive embed-responsive-16by9" 
            </div>
             </div><!-- card image -->
             <div class="card-content">

                <span class="card-info">  </span>
                <span class="card-title"> </span>     
                <span class="card-description"> </span>                    
             </div><!-- card content -->
            </div>
        </div>
    </div>
   <div class="row">    
    <div class="col-md-6 ">
        <div class="card">
            <div class="card-image">
                <div  class="embed-responsive embed-responsive-16by9">
             </div>
             </div><!-- card image -->
              <div class="card-content">
              <span class="card-info">  </span>
                <span class="card-title"> </span>     
                <span class="card-description"> </span>   
            </div><!-- card content -->
          </div>
        </div>
    </div>
  </div>

Answer 1

当前，您正在将数据插入同一div中。您需要在循环内生成html行，然后将其附加/插入到容器中。

var data = {
"available": true,
"screens": [{
        "id": "s01",
        "type": "Selector",
        "config": {
            "views": [{
                "id": "sintel",
                "type": "selectorItem",
                "thumbnail": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/img/thumb_sintel.png",
                "title": "Sintel",
                "description": "Small video. HTML5, native controls, start poster. Bottom, right social. Video + grid",
                "info": "00:51"
            }, {
                "id": "bbb",
                "type": "selectorItem",
                "thumbnail": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/img/thumb_bbb.png",
                "title": "Big Buck Bunny",
                "description": "Large video. HTML5, custom controls, social hover. Video + replay",
                "info": "00:33"
            }, {
                "id": "walle",
                "type": "selectorItem",
                "thumbnail": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/thumb_walle.png",
                "title": "WALL-E",
                "description": "Small video. Youtube, custom controls. Left social. Video + carousel.",
                "info": "02:30"
           }]
        }
    }
]
}

$.each(data.screens[0].config.views, function(index, element) {
console.log(element.info);
console.log(element.title);
console.log(element.description);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您需要遍历数组，而不仅仅是用多个值（一个接一个）替换单个<div>元素，而是需要创建多个元素。

<div id="results"/>

和：

let screenRows = data.screens.map(screen => {
  let viewRows = screen.config.views.map(view => `<tr><td>${view.id}</td><td>${view.description}</td></tr>`);
  let viewTable = `<table>${viewRows}</table>`;
  return `<tr><td>${screen.id}</td><td>${screen.type}</td><td>${viewTable}</td></tr>`;
});
let screenTable = `<table>${screenRows}</table>`;
$("#results").append(screenTable);

这很hacky，但是可以用;-）

无法将JSON对象正确插入HTML

2 个答案: