使用Jquery $ getJSON中的from来追加方法

Ok, so I have 3 files, First a JSON file that tells me all the information that I need, A Html file that gives me like a skeleton of where to put all the javascript A javascript file that will hook up the information from the JSON and put into the html.

好吧,所以我有3个文件,首先是一个JSON文件,它告诉我所需的所有信息,一个Html文件,它给了我一个框架,在哪里放置所有javascript一个javascript文件,将挂钩来自JSON的信息并放入HTML。

So my HTML is something like:

所以我的HTML是这样的:

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

My JSON is this with root to data/bio.json:

我的JSON就是这个以data / bio.json为根:

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

My Javascript is like this:

我的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);
});

Now the problem, When I run this on the browser, I can add the first mockup, and it will add the <div class="work"></div> but when I try to add also the addMe, it doesn't show anything. What am I missing here? And if I put console.log(data); it will show something, which means that I am receiving the file, but it just not adding to the html, because I can add also static text, instead of using the replace method, and won't add the content.

现在问题是,当我在浏览器上运行时,我可以添加第一个模型,它会添加

但是当我尝试添加addMe时,它不会什么都有。我在这里想念的是什么?如果我把console.log(数据);它会显示一些东西,这意味着我正在接收文件,但它只是没有添加到html,因为我可以添加静态文本,而不是使用replace方法,并且不会添加内容。

1 个解决方案

#1

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

It does not work because that is not valid JavaScript.

它不起作用,因为它不是有效的JavaScript。

Open up the console and you should see the error

打开控制台,你应该看到错误

Uncaught SyntaxError: Unexpected token %

未捕获的SyntaxError:意外的标记%

You need to make it a regular expression

你需要使它成为正则表达式

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

or a string

或一个字符串

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

And the second reason it fails is you are selecting the element with the class work before it is added to the page. It does not magically find the element.

它失败的第二个原因是你在添加到页面之前选择了具有类工作的元素。它并没有神奇地找到元素。

Switching it to and it will add it.

切换到它,它将添加它。

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

#1

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