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

Question

私は、一緒に、HTMLのdiv要素の中にはjQueryで作成されたdiv要素と「画像」、「ユーザ名」と「本名」を表示ダミーのデータベースにGithubのユーザープロファイルとポストからJSONを取得しようとしてきました。

しかし、私はdiv要素にJSONから私のオブジェクトを追加するにこだわっています。私はフォーマットが間違っていることを知っているが、私は正しいフォーマットを知らない、誰かが私を助けることができますか？ありがとうございました！ここで

は、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>

Answer 1

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

最後に、そして最も重要なのは、あなたが取得したオブジェクトの値と一緒に作成したHTML文字列を連結する必要があります。 nameプロパティが応答で空であるので、それが生成された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>

注：これを試してみてください。

Answer 2

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

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);

Answer 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) { 
      $(".container").append("<div>"+data['avatar_url']+data.login+data.name +"</div>"); 
     } 

     }); 


    }); 

}); 

Answer 4

JavaScriptコードにHTMLタグを入れないでください。 今すぐあなたのAjaxの成功関数からデータを取り込む

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

のようにコンテナ内のすべての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").find("#login").text(data.login); 
      $(".container").find("#id").text(data.id); 
      $(".container").find("#avatar_url").text(data.avatar_url); 
      // ... 
     } 
    }); 
}); 
}); 

Answer 5

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

       }); 


      }); 

     }); 

Answer 6

あなたはこれを試すことができます - あなたが達成しようとしている何

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