Question

请帮帮我对不起，我的英语水平很低

我有一个json文件

JSON：

var myArray = [
{
"display": "tiger",
"color": "yellow",
"url" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC_tvQ-
   ZxUuaIvfEmBWy9JhHdABpy2C6yLGMkGZGQLJeANSE5o"
"about" : "The tiger (Panthera tigris) is the largest cat species, most 
recognisable for their pattern of dark vertical stripes on reddish-orange 
fur with a lighter underside. The species is classified in the genus 
Panthera with the lion, leopard, jaguar and snow leopard.",
},
{ "display": "krokodile",
 "color" : "green"
},
{ 
 "display": "chicken",
 "color": "yellow"
}
];

我创建了一个按钮的页面。我需要在按下此按钮时显示屏幕JSON文件。随着图片和简短的描述（颜色，一些文字）

Answer 1

相同

的示例

var data = [
                    {
                     "name": "Rehan",
                     "location": "Pune",
                     "description": "hello hi",
                     "created_by": 13692,
                     "users_name": "xyz",
                    },
                    {
                      "name": "Sameer",
                      "location": "Bangalore",
                      "description": "how are you",
                      "created_by": 13543,
                      "users_name": "abc",
                    },
                ]
        var htmlText = '';

        for ( var key in data ) {
            htmlText += '<div class="div-conatiner">';
            htmlText += '<p class="p-name"> Name: ' + data[key].name + '</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);

Answer 2

这可以使用jQuery轻松完成。检查这个小提琴：JsFiddle

var myArray = [{
"display": "tiger",
"color": "yellow",
"url" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC_tvQ-ZxUuaIvfEmBWy9JhHdABpy2C6yLGMkGZGQLJeANSE5o",
"about" : "The tiger (Panthera tigris) is the largest cat species, most recognisable for their pattern of dark vertical stripes on reddish-orange fur with a lighter underside. The species is classified in the genus Panthera with the lion, leopard, jaguar and snow leopard."},{ 
"display": "krokodile",
"color" : "green",
"url" : "some url",
"about" : "some description"},{ 
"display": "chicken",
"color": "yellow",
"url" : "some url",
"about" : "some description"}];

element = 0;
$( "#mybutton" ).click(function() {
    $("#anName").text(myArray[element].display);
    $("#anColor").text(myArray[element].color);
    $("#anImg").attr('src',myArray[element].url);
    $("#anDescription").text(myArray[element].about);
    element++;
    if(element == myArray.length) element = 0;
});

Answer 3

对于你的JSON字符串，请看下面的小提琴：

var myArray = [
{
"display": "tiger",
"color": "yellow",
"url" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC_tvQ-ZxUuaIvfEmBWy9JhHdABpy2C6yLGMkGZGQLJeANSE5o",
"about" : "The tiger (Panthera tigris) is the largest cat species, most recognisable for their pattern of dark vertical stripes on reddish-orange fur with a lighter underside. The species is classified in the genus Panthera with the lion, leopard, jaguar and snow leopard."
},
{ "display": "krokodile",
"color" : "green"
},
{ 
"display": "chicken",
"color": "yellow"
}
];
var htmlContent = '';

for ( var obj in myArray ) {
htmlContent += '<div>';
htmlContent += '<p> Display: ' + myArray[obj].display + '</p>';            
            htmlContent += '<p> Color: ' + myArray[obj].color + '</p>';            
            htmlContent += '<img src="' + myArray[obj].url + '" height=200/>';         
            htmlContent += '<p> About : ' + myArray[obj].about + '</p>';            
htmlContent += '</div>';
}
$('body').append(htmlContent);

https://jsfiddle.net/nisheshpratap/k5ok9rjf/

单击显示页面上的json文件

3 个答案: