将JSON数据放入动态HTML对象中

Question

大家早上好。

我有以下脚本：

<script>
var i;
var jsonCursos = '';
jsRoutes.controllers.DashboardController.cursos().ajax({
    success: function(data){
        jsonCursos = data;
        var container = $(document.getElementById('listacursos'));
        for (i = 0; i < jsonCursos.length; i++){
            $(container).append('<div class="col-lg-3 col-xs-6" align="center"><div class="circular"><img src="@StaticAssets.url("jsonCursos.rutaImg")" width="150" height="150"></div><a href="#" class="thumbnail"><div class="small-box" id="jsonCursos.idCurso"><div class="caption"><h4>"jsonCursos.nombre"</h4><p>"jsonCursos.descripcion"</p></div></div></a></div>');
            $('#listacursos').after(container);
        }
    }
});

我想用jsonCursos数据填充HTML对象，但是当我放入@jsonCursos [i] .descripcion时，页面无法编译。错误在这里：

我该如何提供这些数据？

非常感谢。

Answer 1

我假设你的代码中jsonCursos是一个对象数组，每个对象都有一些用于构建html的属性，然后在每次迭代时附加到$(container)返回的DOM节点。 for循环。

在这种情况下，您无法正确构建包含HTML的字符串。

你必须使用+ plus运算符来连接字符串并在每次出现后指定数组索引[i]（其中i是for循环中的计数器） jsonCursos

请参阅下面的更正行

$(container).append('<div class="col-lg-3 col-xs-6" align="center"><div class="circular"><img src="@StaticAssets.url("' + jsonCursos[i].rutaImg + '")" width="150" height="150"></div><a href="#" class="thumbnail"><div class="small-box" id="' + jsonCursos[i].idCursoa +'"><div class="caption"><h4>"' + jsonCursos[i].nombre + '"</h4><p>"' + jsonCursos[i].descripcion + '"</p></div></div></a></div>' );

container以一种非常奇怪的方式设置：

var container = $(document.getElementById('listacursos'));

假设$代表jQuery，那么你只需要：

var container = '#listacursos';