web-dev-qa-db-fra.com

Comment ajouter des objets de JSON à une div en HTML?

J'ai essayé d'obtenir le code JSON d'un profil utilisateur Github et de le publier dans une base de données factice, puis d'afficher "image", "nom d'utilisateur" et "nom réel" avec un div créé par jQuery dans un div en HTML.

Mais je suis coincé à ajouter mes objets de JSON à la div. Je sais que je me suis trompé de format mais je ne connais pas le bon format, quelqu'un peut-il m'aider avec cela? Je vous remercie!

Voici le Javascript et le 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
6
wen zhang

Premièrement, le paramètre que vous définissez dans le rappel $.ajax est data et non pas datas. Les propriétés auxquelles vous essayez d'accéder figurent dans l'objet form de la réponse. Vous devez donc utiliser data.form pour y accéder. 

Enfin et surtout, vous devez concaténer la chaîne HTML que vous créez avec les valeurs de l'objet récupéré. Essaye ça:

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

Notez que la propriété name est vide dans la réponse, elle n'apparaît donc pas dans le code HTML généré.

7
Rory McCrossan

Ne mettez pas les balises HTML dans le code JavaScript. Mettez tous vos codes HTML dans un conteneur comme

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

Maintenant, remplissez les données de votre fonction de succès 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

Vous ne pouvez pas accéder aux données d'objet en mode chaîne. Vous devez terminer la chaîne pour ajouter le contenu de votre objet comme suit:

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

vous pouvez essayer ceci: - 

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

Essaye ça

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