如何在JavaScript中正確讀取對象

我是編程新手，最近開始學習Javascript，我有一個問題出現在我做的一些練習中。我在網站上搜索了更多信息，但沒有找到解決我的問題的方法。我提前道歉我的英語不好，如果這不是正確的地方或正確的方式來問這個問題，因爲這是我在Stackoverflow的第一篇文章。如何在JavaScript中正確讀取對象

目前正在練習HTML模板。假設代碼是正確的，我不確定我錯在哪裏。將代碼加載到瀏覽器和Handlebars中會給我一個錯誤：「錯誤：您必須將一個字符串或Handlebars AST傳遞給Handlebars.compile，並且傳遞了undefined」。我試圖調試，並看到當我試圖從date對象中取回一個值時，它會返回undefined。在之前的練習中有一個類似的問題，我嘗試讀取JSON對象，但沒有設法解析它並再次返回undefined。你能幫助我嗎，我在這個問題上停留了一段時間。

var data = { 
 
    animals: [{ 
 
    name: 'Lion', 
 
    url: 'https://susanmcmovies.files.wordpress.com/2014/12/the-lion-king-wallpaper-the-lion-king-2-simbas-pride-4685023-1024-768.jpg' 
 
    }, { 
 
    name: 'Turtle', 
 
    url: 'http://www.enkivillage.com/s/upload/images/a231e4349b9e3f28c740d802d4565eaf.jpg' 
 
    }, { 
 
    name: 'Dog' 
 
    }, { 
 
    name: 'Cat', 
 
    url: 'http://i.imgur.com/Ruuef.jpg' 
 
    }, { 
 
    name: 'Dog Again' 
 
    }] 
 
} 
 

 
window.onload = function() { 
 
    var htmlTemplate = document.getElementsByClassName('container-template').innerHTML; 
 
    var template = Handlebars.compile(htmlTemplate); 
 

 
    for (let x of data.animals) { 
 
    if (x.hasOwnProperty('url')) { //x.url 
 
     x.hasUrl = true; 
 
    } else { 
 
     x.hasUrl = false; 
 
    } 
 
    } 
 

 
    document.getElementsByClassName('container').innerHTML = template(data); 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Animals & Batman</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    </div> 
 

 
    <script class="container-template" type="text/x-handlebars-template"> 
 
    <h1>Animals</h1> 
 
    {{#each animals}} 
 
     {{#if hasUrl}} 
 
      <li> 
 
       <a href="{{url}}">See a {{name}}</a> 
 
      </li> 
 
     {{else}} 
 
      <li> 
 
       <a href="http://cdn.playbuzz.com/cdn/3170bee8-985c-47bc-bbb5-2bcb41e85fe9/d8aa4750-deef-44ac-83a1-f2b5e6ee029a.jpg">No link for {{name}}, here is Batman!</a> 
 
      </li> 
 
     {{/if}} 
 
    {{/each}} 
 
    </script> 
 

 
    <script src="../handlebars-v4.0.5.js" charset="utf-8"></script> 
 
    <script src="../jquery-3.1.0.js" charset="utf-8"></script> 
 
    <script src="./main.js" charset="utf-8"></script> 
 
</body> 
 

 
</html>

來源

2016-08-12 CosmicEon

這沒有什麼關係解析JSON。你的'data'對象不需要被解析，因爲它已經是一個JavaScript對象。我很確定問題是因爲'document.getElementsByClassName'返回一個數組。嘗試'documents.getElementsByClassName（「container-template」）[0] .innerhtml' – CoconutFred

「你一直在使用這個詞，我認爲這不代表你的想法。」 [沒有像「JSON對象」]（http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/）。 –

document.getElementsByClassName返回元件的陣列，而不是一個單一的一個 - 因爲頁面上的多個元素可以具有相同的類。

你可能需要的是使用id代替類：

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

var htmlTemplate = document.getElementById('container-template').innerHTML;

來源

2016-08-12 19:26:35

謝謝你的回答，這對我很有幫助。有了這個問題，我意識到我對DOM，數組和對象瞭解的不多。 – CosmicEon

如何在JavaScript中正確讀取對象

回答

相關問題