web-dev-qa-db-ja.com

JSONからHTMLのdivにオブジェクトを追加する方法は？

GithubユーザープロファイルからJSONを取得し、ダミーデータベースに投稿してから、「image」、「user name」、「real name」を、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>
javascriptjqueryhtmljsonappend
8
wen zhang

まず、$.ajaxコールバックで定義するパラメーターはdataではなくdatasであり、アクセスしようとしているプロパティは応答のformオブジェクトにあります、したがって、それらにアクセスするにはdata.formを使用する必要があります。

最後に、そして最も重要なこととして、作成した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には表示されないことに注意してください。

9
Rory McCrossan

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
Kaushal
$(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>");
                }

              });


            });

        });
0
Ray

文字列モードではオブジェクトデータにアクセスできません。次のようにオブジェクトのコンテンツを追加するには、文字列を終了する必要があります。

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);
0
Emil S. Jørgensen

あなたはこれを試すことができます：-

$(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/

0
Ahmed Monaem

これを試して

$(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>");
        }

      });


    });

});
0
Piyush.kapoor