Javascript Ajax-如何显示json数据

我正在尝试正确显示json数据。我已经运行了所有数据，但无法正确显示它们

如何附加名称、图像和URL，使其显示如下：

<div>name</div>
<img src="url from jason goes here">
<a href="url">url of page</a>

---

使用

文本

而不是

附加

$（函数（）{
$.ajax({
url:“https://api.github.com/search/repositories?q=stars",
方法：“获取”，
成功：功能（数据）{
//控制台日志（数据）；
//$（“.git user”）.html（JSON.stringify（data））；
$.each（data.items，function（i，items）{
$（“#名称”）.text（items.name）；
$（“#image”）.text（items.owner.avatar_url）；
$（“#回购”）.text（items.html\uURL）；
});
},
错误：函数（）{
控制台日志（数据）；
}
});
});
使用
文本
而不是
附加


$（函数（）{
$.ajax({
url:“https://api.github.com/search/repositories?q=stars",
方法：“获取”，
成功：功能（数据）{
//控制台日志（数据）；
//$（“.git user”）.html（JSON.stringify（data））；
$.each（data.items，function（i，items）{
$（“#名称”）.text（items.name）；
$（“#image”）.text（items.owner.avatar_url）；
$（“#回购”）.text（items.html\uURL）；
});
},
错误：函数（）{
控制台日志（数据）；
}
});
});
您必须为每个正在加载的项目生成一个容器。下面是一个关于如何做到这一点的示例代码，我希望这将引导您朝着正确的方向前进

        $.each(data.items, function(i, items) {
            var html_to_append = '<div class="git-user"><div class="name">'+items.name+'</div><div class="image">'+items.owner.avatar_url+'</div><a class="repo">'+items.html_url+'</a></div>';
           $('#items-container').append(html_to_append);
        });

这将是您的html的外观（将填充上述内容）：

您必须为每个正在加载的项目生成一个容器。下面是一个关于如何做到这一点的示例代码，我希望这将引导您朝着正确的方向前进

        $.each(data.items, function(i, items) {
            var html_to_append = '<div class="git-user"><div class="name">'+items.name+'</div><div class="image">'+items.owner.avatar_url+'</div><a class="repo">'+items.html_url+'</a></div>';
           $('#items-container').append(html_to_append);
        });

这将是您的html的外观（将填充上述内容）：

您可以尝试使用
前缀来动态附加元素

请注意，我已经删除了
div
中的动态元素。因此，可以动态添加元素。您可以根据需要格式化下面的代码

<div id="git-user">

</div


您可以尝试使用
prepend
动态附加元素

请注意，我已经删除了
div
中的动态元素。因此，可以动态添加元素。您可以根据需要格式化下面的代码

<div id="git-user">

</div



var$container=$（“#结果”），
html=''；
$.each（data.items，function（i，item）{
//构建html
html+=''+
''+item.name+''+
'' + 
'' + 
'';
});
//将其附加到容器中
$container.append（html）；

var$container=$（“#结果”），
html=''；
$.each（data.items，function（i，item）{
//构建html
html+=''+
''+item.name+''+
'' + 
'' + 
'';
});
//将其附加到容器中
$container.append（html）；
试试这个：


$（函数（）{
$.ajax({
url:“https://api.github.com/search/repositories?q=stars",
方法：“获取”，
成功：功能（数据）{
//控制台日志（数据）；
//$（“.git user”）.html（JSON.stringify（data））；
var$wrapper=$（'git user'）；
var$namelement=$（'#name'）；
var$imageElement=$（“#image”）；
var$repoElement=$（“#repo”）；
$.each（data.items，function（i，items）{
var$clonedName=$namelement.clone（）.html（items.name）；
var$clonedImage=$imageElement.clone（）.attr（'src'，items.owner.avatar\u url）；
var$clonedRepo=$repoElement.clone（）.html（items.html\uURL）；
$wrapper.append（$clonedName）；
$wrapper.append（$clonedImage）；
$wrapper.append（$clonedRepo）；
});
},
错误：函数（）{
控制台日志（数据）；
}
});
});

试试这个：


$（函数（）{
$.ajax({
url:“https://api.github.com/search/repositories?q=stars",
方法：“获取”，
成功：功能（数据）{
//控制台日志（数据）；
//$（“.git user”）.html（JSON.stringify（data））；
var$wrapper=$（'git user'）；
var$namelement=$（'#name'）；
var$imageElement=$（“#image”）；
var$repoElement=$（“#repo”）；
$.each（data.items，function（i，items）{
var$clonedName=$namelement.clone（）.html（items.name）；
var$clonedImage=$imageElement.clone（）.attr（'src'，items.owner.avatar\u url）；
var$clonedRepo=$repoElement.clone（）.html（items.html\uURL）；
$wrapper.append（$clonedName）；
$wrapper.append（$clonedImage）；
$wrapper.append（$clonedRepo）；
});
},
错误：函数（）{
控制台日志（数据）；
}
});
});

数据是如何错误显示的？如果在success函数中执行
console.log（data）
，结果是什么？JSON结构如何？@pablito.aven所有数据都被正确调用。我需要用正确的html显示它们。有几件事，不要在每个函数中使用ID，对于div，你需要文本，对于图像，你需要添加attr（“src”，url），对于“a”标记，你需要。attr（“href”，url）@KarthikGanesan谢谢是的，有意义，你能把它放在一起吗？数据是如何被错误显示的？如果在success函数中执行
console.log（data）
，结果是什么？JSON结构如何？@pablito.aven所有数据都被正确调用。我需要用正确的html显示它们。两件事，不要在每个函数中使用ID，对于div，你需要文本，对于图像，你需要添加attr（“src”，url），对于“a”标记，你需要。attr（“href”，url）@KarthikGanesan谢谢是的，有意义，你能把它放在一起吗？这是不正确的。它只会替换每个项目的文本。谢谢，但我需要在一个漂亮的窗口中显示所有项目orther@user3699998我明白了，然后您需要克隆元素并在循环中向它们附加数据，最后将结果附加到
“#git user
元素。这是不正确的。它将只替换eac的文本
<!-- Lets have a container that will display all the results -->
<div id="results">

</div>

var $container = $('#results'),
    html = '';

$.each(data.items, function(i, item) {
    // build the html
    html += '<div>' +
              '<div class="name">' + item.name + '</div>' + 
              '<div class="image"><img src="' + item.owner.avatar_url + '"></div>' + 
              '<a href="' + item.html_url + '"></a>' + 
           '</div>';
});

// append it to the container
$container.append(html);