使用來自Jquery中的追加方法$ getJSON

好的，所以我有3個文件，首先是一個JSON文件，告訴我所需要的所有信息，一個Html文件，它給了我一個如何放置的框架所有的javascript 一個JavaScript文件，將鉤住來自JSON的信息並放入html中。

所以我的HTML是一樣的東西：

<div class="hello"> 
    <h2>Name</h2> 
</div>

我的JSON是這根帶數據/ bio.json：

{ 
"name" : "Olivia Palito", 
"age" : "23" 
}

我的JavaScript是這樣的：

var mockup = '<div class="work"></div>'; 
var mockup02 = '<div>%data%</div>'; 
var $addItem01 = $(".hello"); 
var $addItem02 = $(".work"); 
var jsonRoot = 'data/bio.json'; 
$.getJSON(jsonRoot, function(data){ 
    var addMe = mockup.replace('%data%', data.name); 
    $addItem01.append(mockup); 
    $addItem02.append(addMe); 
});

現在的問題，當我在瀏覽器上運行這個，我可以添加第一個樣機，它會添加<div class="work"></div>，但是當我嘗試添加addMe時，它不顯示任何內容。我在這裏錯過了什麼？如果我把console.log（數據）;它會顯示一些東西，這意味着我正在接收文件，但它不會添加到HTML中，因爲我可以添加靜態文本，而不是使用替換方法，並且不會添加內容。

來源

2015-01-17 Renan Cidale

var mockup02 = mockup.replace(%data%, data.name);

它不工作，因爲這不是有效的JavaScript。

打開控制檯，你應該看到錯誤

Uncaught SyntaxError: Unexpected token %

你需要使它成爲一個正則表達式

var mockup02 = mockup.replace(/%data%/, data.name);

或字符串

var mockup02 = mockup.replace("%data%", data.name);

而且第二個失敗的原因是你在添加到頁面之前，選擇類別爲work的元素。它不會奇蹟般地找到元素。

將其切換到，它將添加它。

$(".work").append(addMe);

來源

2015-01-17 06:45:51 epascarello

對不起epascarello，我輸錯我的問題，如果你能請再看看，我現在面臨的問題是不是與部分在那裏我有用於替換的「％數據％」來自JSON文件的內容，更重要的是我試圖將新事物添加到html中，並且它在第一次嘗試時工作，當我標記.hello類並追加到它時，但是當我試圖追加到最後一個追加附帶的.work類，它不起作用。我希望我能說清楚。 –

我添加了原因...你正在尋找一個不存在的元素。就像有人在你出現之前叫你的名字一樣。你不會迴應，因爲你不在那裏。 – epascarello

如果你看看我的代碼，你會發現我發佈了該代碼。 $ addItem02.append（ADDME）;其中$ addItem02是已創建的變量 –

使用來自Jquery中的追加方法$ getJSON

回答

相關問題