Platziere Elemente in einem einzigen Div in JQuery

Question

Ich bin neu bei JQuery und ich arbeite mit einer API, um Folgendes zu tun.

1. Holen Sie mehrere Werte aus der API wie Name, Ort, Wetter usw.

2. ich eine Bootstrap-Struktur mit dem folgenden Code haben: -

   <div id="place_here" class="row"> 
   
   </div> 
   

   Ich möchte die Daten platzieren, Ich bekomme von der API in diesem DIV.

3. Einzige Sache, die ich tun möchte, ist, all diese Daten in ein einzelnes div zu setzen und dieses div in die obige div-Zeile einzufügen, um eine schöne tabellenähnliche Struktur zu erzeugen. Etwas wie folgt aus: -

   var str = '<div class="col-md-4">' + newoverview + '</div>'; 
   

   (newoverview ist eine Zeichenfolge von JSON, die ich bekomme jedoch, dass nur ein einzelner Wert ist, die ich oben in meinem div class = "col-md-4" Tag legen will ich will auch mehr Werte einzufügen...

Probleme: -.

1. ich kann nicht (oder nicht wissen), wie in JQuery globale Variable verwenden Jedes Mal, wenn ich einen Variablenwert in Konsole anmelden es mir ein null . Ich weiß, das ist, weil JSON asynchron ist, aber ich kenne keine Arbeit um diese.

2. Ich habe versucht, mehrere Funktionen und die Weitergabe von Werten nacheinander und Hinzufügen von Div durch Div. Aber das macht nicht das, was ich tun möchte und gibt eine durcheinandergebrachte Struktur.

Wie kann ich sammeln alle erforderlichen Werte, die ich in einem JSON erhalten und sie in einem einzigen div kombinieren und in einem div in meinem HTML-Struktur platzieren.

Edit: - Code

$(document).ready(function(){ 
    $("#Search_Button").click(function() { 
     var name; 
     name = $("#value").val(); 
     if(!name){ 
     console.log("Enter a name"); 
     } 
     search(name); 
     }); 

    function search(name){ 
    var url = "url_here"; 
    $.getJSON(url,function(data){ 
     $.each(data.results,function(i,j){ 
      displayImage(j.path); 
      displayOverview(j.id); 
     }); 
    }); 
    } 



function displayOverview(id){ 
    var url = "url_here"; 
    $.getJSON(url,function(data){ 
     var overviewx = data.overview; 
     var newoverview=''; 
      for(var x=0;x<overviewx.length && x<100 ;x++){ 
      newoverview+=overviewx[x]; 
      } 
      var str = '<div class="col-md-4">' + newoverview + 
      '</div>'; 
      $("#place_here").append(str); 
    }); 

} 

function displayImage(id){ 
    var url = "url_here"; 
    var str = '<img src="' + url + '"</img>'; 
    $("#place_here").append(str); 
    console.log(str); 
} 


    }); 

ich beide (und vielleicht auch mehr) Tags in einem einzigen div von displayOverview und von displayImage platzieren möchten und platzieren, dass div in mein Haupt-HTML-Struktur.

Answer 1

Dies ist nur ein Beispiel!

asynchrone Verarbeitung zu vermeiden, verwenden wir Rückrufe

function getItem(){ 
    var dfd = jQuery.Deferred(); 
    var url_to_json = 'json/test.json'; 

     $.getJSON(url_to_json, function(data) { 
      dfd.resolve(data); 
     }); 
    return $dfd.promise(); 
} 

wenn Sie benötigen die Antwort, die Sie gerade:

getItem.done(function(data){ 
console.log(data); 
});