Wie Sie anfügen aus JSON Objekten zu einem div in HTML?

Ich habe versucht, JSON von einem Github-user-Profil und post in Pseudo-Datenbank zeigt dann das "Bild", "user name" und "real name" zusammen mit div erstellt von jQuery in ein div im html ist.

Aber ich bin stecken in Anhängen meine aus JSON Objekten zu den div. Ich weiß, ich habe das format falsch ist, aber ich weiß nicht, das richtige format, kann mir jemand helfen mit, dass? Danke!

Hier ist die Javascript und HTML:

JS:

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

HTML:

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

Was wollen Sie erreichen? jetzt sind Sie anfügen, ein div mit einem festen text. Versuchen Sie geben ein Beispiel json und der erwarteten html-snippet

InformationsquelleAutor wen zhang | 2016-07-18

8

Erstens die parameter definieren Sie in der $.ajax Rückruf data, nicht datas und die Eigenschaften, die Sie zugreifen möchten, sind in der form - Objekt der Antwort, so müssen Sie data.form Zugang zu Ihnen.

Schließlich, und am wichtigsten ist, müssen Sie verketten Sie die HTML-Zeichenfolge, die Sie erstellen, zusammen mit den Werten aus dem abgerufenen Objekt. Versuchen Sie dies:

JS:
```
$(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>');
      }
    });
  });
});
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
```
Beachten Sie, dass die name - Eigenschaft leer ist, in der Antwort, so erscheint es nicht in das generierte HTML.
- Es Training Präfekt! Ich wurde mit diesem Kampf die ganze Nacht! Vielen, vielen Dank!!!
- Ein bisschen spät, aber kein problem, gerne helfen 🙂
InformationsquelleAutor Rory McCrossan

Nicht HTML-tags im JavaScript-Code.
Setzen Sie alle Ihre HTML-codes innerhalb der container wie

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

Nun füllen Sie die Daten aus Ihrer ajax-success-Funktion.

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

InformationsquelleAutor Kaushal

Können Sie keinen Zugriff auf die Daten des Objektes in string-Modus. Sie müssen, um das Ende der Zeichenfolge Anhängen, Inhalte von Ihrem Objekt, etwa so:

JS:

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

InformationsquelleAutor Emil S. Jørgensen

Versuchen, diese

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

      });


    });

});

Was datas['avatar_url']? datas.login und datas.name auch zurück undefined.
korrigiert den code

InformationsquelleAutor Piyush.kapoor

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

              });


            });

        });

InformationsquelleAutor Ray

können Sie versuchen, diese : -

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

InformationsquelleAutor Ahmed Monaem

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.