-1

My use case is to add image and a text dynamically to list. All I have is JSON (extracted from DB as result set). The JSON structure is as mentioned below:

[{"Comment":"Test","FilePath":"\/storage\/sdcard0\/20130725153841.JPEG"},{"Comment":"Image List","FilePath":"\/storage\/sdcard0\/20130725160020.JPEG"}]

So, in my java script, I append this list to a HTML body through the following code:

<script>
$(document).ready(function(e) { 
    var data =     [{"Comment":"Test","FilePath":"\/storage\/sdcard0\/20130725153841.JPEG"},{"Comment":"Image List","FilePath":"\/storage\/sdcard0\/20130725160020.JPEG"}]
    var items = [];
    $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val.Comment + '</li>');
    });
    $('<ul/>', {        
        html: items.join('')
        }).appendTo('body');
    });
</script>

Here, I am trying to bring an image (whose filepath is available in the JSON) to the list. So, the list should contain image (may be a smaller one - I shall use styling for this) and the comment side by side.

Please can someone help?

EDIT:

I tried this: I am building the list runtime.. So, i tried using

before val.comment.. it doesnt seem to work. Any words on this?

4

2 回答 2

0

为了显示每个列表项的图像，您应该必须img tag在列表项中添加。JS 代码应如下所示：

items.push('<li id="' + key + '"><img src="' + val.FilePath + '" />' + val.Comment + '</li>');

希望这会有所帮助！

于 2013-09-14T09:22:52.307 回答
0

在您的 items.push 添加<img>标签并从您的FilePath字段中输出值：

items.push('<li id="' + key + '">' + val.Comment + '<img src="' + val.FilePath +'" alt="" />' + '</li>');
于 2013-09-14T09:23:58.130 回答