循环div基于从php响应中获取的数据

时间:2017-06-26 13:58:54

标签: javascript php json

数据

[{"id":"1","title":"science","added":"today","updated":"today","api":"25213","access":"0"}
[{"id":"2","title":"commerce","added":"","updated":"","api":"","access":"0"}]

代码

var data = 
            [{"id":"1","title":"science","added":"today","updated":"today","api":"25213","access":"0"}][{"id":"2","title":"commerce","added":"","updated":"","api":"","access":"0"}];


        var htmlText = '';

        for ( var key in data ) {
            htmlText += '<div class="div-conatiner">';
            htmlText += '<p class="p-name"> Name: ' + data[key].title + '</p>';
            htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
            htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
            htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
            htmlText += '<p class="p-uname"> Username: ' + data[key].users_name + '</p>';
            htmlText += '</div>';
        }

        $('body').append(htmlText);

这是php响应。我想用hs用hs代表这些数据,不知何故怎么做呢

1 个答案:

答案 0 :(得分:0)

您的代码中有几处错误。正如@RiggsFolly已经提到过你的json无效。此外,您需要将数据字符串解析为json对象。看看这段代码。

var data = '[{"id":"1","title":"science","added":"today","updated":"today","api":"25213","access":"0"},{"id":"2","title":"commerce","added":"","updated":"","api":"","access":"0"}]';
var htmlText = '';

var data = JSON.parse(data);
for ( var key in data ) {
    htmlText += '<div class="div-conatiner">';
    htmlText += '<p class="p-name"> Name: ' + data[key].title + '</p>';
    htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
    htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
    htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
    htmlText += '<p class="p-uname"> Username: ' + data[key].users_name + '</p>';
    htmlText += '</div>';
}

$('body').append(htmlText);

由于您已经在使用jQuery,因此您还可以使用jQuery样式创建div容器。

var container = $('<div></div>').addClass('div-container');