Question

我是jQuery的新手，我正在使用API来执行以下操作。

从API中获取多个值，如姓名，地点，天气预报等。
我有一个带有以下代码的bootstrap结构： -
```
<div id="place_here" class="row">

</div>
```
我想在此DIV中放置从API获得的数据。

我想要做的只是将所有数据放入一个div中，并将div放在上面的div div中，以创建一个漂亮的表格，如结构。这样的事情： -

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

（newoverview是我从JSON得到的一个字符串。但是，这只是我想放在上面的div class = "col-md-4"标记中的一个值。我想插入更多的值。

< / LI>

问题： -

我不能（或不知道）如何在JQuery中使用全局变量。每当我在控制台中记录变量值时，它都会给我一个null。我知道那是因为JSON是异步的，但我不知道如何解决这个问题。
我尝试使用多个函数并逐个传递值并按div添加div。然而，这并没有做我想做的事情并且给出了混乱的结构。

如何收集JSON中获得的所有必需值，并将它们组合在一个div中，并将其放在HTML结构中的div中。

编辑： - 代码

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

我希望将{（1}}和div中的两个（可能更多）标记放在一个displayOverview中，并将displayImage放入我的主HTML结构中。< / p>

Answer 1

这只是一个例子！

为防止异步处理，我们使用回调

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

当您需要回复时：

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

将元素放在jQuery

1 个答案: