$ .getJSON結果轉換爲html

我已經閱讀了幾個例子，但我仍然有點卡住。我和正從被格式化像這樣

{ 
total:123, 
id: "1234", 
results: [ 
      { 
      id: "1234", 
      name: "bobs market", 
      phone: "123-456-7890", 
      othervalue: "33333333", 
      onemore: "get this" 
      }, 
      { 
      id: "1235", 
      name: "jans market", 
      phone: "123-456-7899", 
      othervalue: "33333353", 
      onemore: "get this one" 
      } 
     ] 
}

我試圖通過每個記錄使用$ .getJSON功能循環並顯示每個業務一個div內與#bizresults的ID的API飼料所以生成的HTML看起來像這樣

<div id="business"> 
     <h4><a href=#>Business Name</a></h4> 
     <p id="phone">555-555-5555</p> 
     <p id="adr"> 
     <span id="street-address">12 Main Street</span> 
     <span id="locality">Sacramento</span> 
     <span id="region">CA</span> 
</div>

我似乎得到腳本的結果我可以看到他們在Chrome開發者控制檯，但是我不能似乎得到輸出到我的股利。

以我看着@ Handlebars.js **我還只是不太有建議 -

<script id="biz_template" type="text/x-handlebars-template"> 

    <div id="businesses"> 
    {{#each jsonResult}} 
    <a href=#><h4>{{name}}</a></h4> 
    <p id="phone">{{phone}}</p> 
    <p id="adr"> 
    <span id="street-address">{{address}}</span> 
    <span id="locality">{{city}}</span> 
    <span id="region">{{state}}</span> 
    </p> 
    {{/each}} 
    </div> 

    </script> 




<script> 
     var source = $("#biz_template").html(); 
     var template = Handlebars.compile(source); 

var data = '{"totalCount":61,"impId":"17","jsonResult":[{"impId":"17","listingId":"94523","pageUrl":"/page/LA/new-orleans/ccs-coffee-house/17-94523.html","name":"CC's Coffee House","phone":"(504) 586-0278","address":"650 Poydras St","city":"New Orleans","state":"LA","latitude":"29.949339","longitude":"-90.070017"},{"impId":"17","listingId":"417428","pageUrl":"/page/LA/metairie/ccs-community-coffee-house/17-417428.html","name":"CC's Community Coffee House","phone":"(504) 831-1449","address":"701 Metairie Rd","city":"Metairie","state":"LA","latitude":"29.98763","longitude":"-90.130528"},{"impId":"17","listingId":"228835","pageUrl":"/page/LA/new-orleans/ccs-community-coffee-house/17-228835.html","name":"Cc's Community Coffee House","phone":"(504) 566-1863","address":"228 St Charles Av","city":"New Orleans","state":"LA","latitude":"29.951952","longitude":"-90.069885"}]}'; 

$("#biz").html(template(data)); 
</script>

有什麼想法？

我也有BIZ的ID DIV在HTML

來源

2013-01-05 Disco Panda

請張貼的JavaScript代碼。這是重要的... –

你會這樣做 - > http://jsbin.com/idefix/1/edit – adeneo

如果你想使用adeneo給出的例子來做。如果你想做這種事情很多次鬍子會大大幫助http://mustache.github.com/ – Popnoodles

我剛剛做了一個插件$.getJSON和句柄，這只是它的一部分，基本上所有你需要的。如果你願意，我可以發佈整個插件。

不要忘記引用文件或URL到車把

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js" type="text/javascript"></script> 

var container = $('#tweets'), 
    template: $('#tweets-template').html() 

$.getJSON(this.url, function(data) { 
        var tweets = $.map(data.results, function(tweet) { 
         return { 
          author: tweet.from_user, 
          tweet: tweet.text, 
          thumb: tweet.profile_image_url, 
          url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str 
         }; 
        }); 

        var templateHandlebars = Handlebars.compile(template); 
        container.append(templateHandlebars(tweets)); 
}); 


//this is the html and the template 
<ul id="tweets"> 
     <script id="tweets-template" type="text/x-handlebars-template"> 
      {{#each this}} 
       <li> 
        <img src={{thumb}} alt={{author}} /> 
        <p><a href={{url}}>{{tweet}}</a></p> 
       </li> 
      {{/each}} 
     </script> 
</ul>

來源

2013-01-05 20:50:46

這裏的任務是建立標記中的getJSON成功的功能。你可以通過concackating字符串或使用模板系統（如handlebars，JsRender，下劃線等）來做到這一點。如果你正在尋找雙向綁定，請看Angular或Knockout。

來源

2013-01-05 19:14:27 robrich

好吧 - 看着這個車把看起來很有趣，但我有從來沒有使用它 - 我會捅一些 - 但任何指導將有助於我前進 - –

$ .getJSON結果轉換爲html

回答

相關問題