如何将对象从 JSON 附加到 HTML 中的 div？

Posted 2023-03-11

【中文标题】如何将对象从 JSON 附加到 HTML 中的 div？

【英文标题】：How to append objects from JSON to a div in HTML?

【发布时间】：2016-11-20 16:18:13

【问题描述】：

我一直在尝试从 Github 用户配置文件中获取 JSON 并在虚拟数据库中发布，然后将“图像”、“用户名”和“真实姓名”与 jQuery 创建的 div 一起显示到 html 中的 div 中。

但我坚持将我的对象从 JSON 附加到 div。我知道我的格式错误，但我不知道正确的格式，有人可以帮我吗？谢谢！

这里是 javascript 和 HTML：

$(document).ready(function() 
  var datas = $.get("https://api.github.com/users/iwenyou", function(infos) 
    $.ajax(
      type: "POST",
      url: "https://httpbin.org/post",
      data: infos,
      dataType: "json",
      success: function(data) 
        $(".container").append("<div>datas['avatar_url']+datas.login+datas.name</div>");
      
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

【问题讨论】：

你想达到什么目的？现在你正在附加一个带有固定文本的 div。尝试给出一个示例 json 和预期的 html sn-p

【参考方案1】：

不要在 JavaScript 代码中放置 HTML 标签。 将所有 HTML 代码放入容器中，例如

<div class="container">
    <div id="login"></div>
    <div id="id"></div>
    <div id="avatar_url"></div>
    ...
</div>

现在从您的 ajax 成功函数中填充数据。

$(document).ready(function() 
var datas = $.get("https://api.github.com/users/iwenyou",
function(infos) 
    $.ajax(
        type: "POST",
        url: "https://httpbin.org/post",
        data: infos,
        dataType: "json",
        success: function(data) 
            $(".container").find("#login").text(data.login);
            $(".container").find("#id").text(data.id);
            $(".container").find("#avatar_url").text(data.avatar_url);
           // ...
        
   );
);
);

【参考方案2】：

首先，您在$.ajax 回调中定义的参数是data，而不是datas，并且您尝试访问的属性在响应的form 对象中，因此您需要使用@987654325 @ 访问它们。

最后，也是最重要的一点，您需要将您创建的 HTML 字符串与检索到的对象中的值连接起来。试试这个：

$(document).ready(function() 
  var datas = $.get("https://api.github.com/users/iwenyou", function(infos) 
    $.ajax(
      type: "POST",
      url: "https://httpbin.org/post",
      data: infos,
      dataType: "json",
      success: function(data) 
        $(".container").append('<div>' + data.form.avatar_url + '</div><div>' + data.form.login + '</div><div>' + data.form.name + '</div>');
      
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

请注意，name 属性在响应中为空，因此不会出现在生成的 HTML 中。

【参考方案3】：

你可以试试这个：-

$(document).ready(function () 

            var datas = $.get("https://api.github.com/users/iwenyou",
                    function (infos) 
                        $.ajax(
                            type: "POST",
                            url: "https://httpbin.org/post",
                            data: infos,
                            dataType: "json",
                            success: function (data) 
                                if (data.hasOwnProperty('form')) 
                                    datas = data.form;
                                    $(".container").append("<div>Avatar URL : " + datas.avatar_url + "<br>Lodin : " + datas.login + "<br>Name : " + datas.name + "</div>");
                                
                            

                        );


                    );

                );

https://jsfiddle.net/zt2j1h3a/2/

【参考方案4】：

$(document).ready(function() 

          var datas = $.get("https://api.github.com/users/iwenyou",
            function(datas) 
              $.ajax(
                type: "POST",
                url: "https://httpbin.org/post",
                data: datas,
                dataType: "json",
                success: function(data) 
                  $(".container").append("<div>"+data.form.avatar_url+"</br>"+data.form.login+"</br>"+data.form.name+"</br>"+"</div>");
                

              );


            );

        );

【参考方案5】：

试试这个

$(document).ready(function() 

  var datas = $.get("https://api.github.com/users/iwenyou",
    function(infos) 
      $.ajax(
        type: "POST",
        url: "https://httpbin.org/post",
        data: infos,
        dataType: "json",
        success: function(data) 
          $(".container").append("<div>"+data['avatar_url']+data.login+data.name +"</div>");
        

      );


    );

);

【讨论】：

datas['avatar_url'] 怎么样？ datas.login 和 datas.name 也返回 undefined。

【参考方案6】：

您无法在字符串模式下访问对象数据。您需要结束字符串以附加对象中的内容，如下所示：

console.clear();
var datas = 
  "login": "iwenyou",
  "id": 20179472,
  "avatar_url": "https://avatars.githubusercontent.com/u/20179472?v=3",
  "gravatar_id": "",
  "url": "https://api.github.com/users/iwenyou",
  "html_url": "https://github.com/iwenyou",
  "followers_url": "https://api.github.com/users/iwenyou/followers",
  "following_url": "https://api.github.com/users/iwenyou/following/other_user",
  "gists_url": "https://api.github.com/users/iwenyou/gists/gist_id",
  "starred_url": "https://api.github.com/users/iwenyou/starred/owner/repo",
  "subscriptions_url": "https://api.github.com/users/iwenyou/subscriptions",
  "organizations_url": "https://api.github.com/users/iwenyou/orgs",
  "repos_url": "https://api.github.com/users/iwenyou/repos",
  "events_url": "https://api.github.com/users/iwenyou/events/privacy",
  "received_events_url": "https://api.github.com/users/iwenyou/received_events",
  "type": "User",
  "site_admin": false,
  "name": null,
  "company": null,
  "blog": null,
  "location": "SF Bay Area",
  "email": null,
  "hireable": null,
  "bio": "A crawling programer...",
  "public_repos": 3,
  "public_gists": 0,
  "followers": 0,
  "following": 0,
  "created_at": "2016-06-28T04:45:54Z",
  "updated_at": "2016-07-10T03:47:33Z"

var output = "<div>" + datas['avatar_url'] + " | " + datas.login + "</div>";
console.log(output);
document.write(output);