[英]Trying to append my fetched JSON data to a field but this doesn't work
I am trying to loop through my JSON and then append each word to col-md-9
with the id eenwoordlol[ + ID123 +]
, but this doesn't work. 我试图遍历JSON,然后将每个单词附加到带有id
eenwoordlol[ + ID123 +]
col-md-9
上,但这是行不通的。
var ID123 = 0;
function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
exercises.forEach(function(exercise) {
console.log(exercise.word);
var exer = ($('<div/>', {
'class': 'row'
}));
var mainCol3 = ($('<div/>', {
'class' : 'col-md-3'
})).append($('<div/>', {
'class': 'row'
})).append($('<div/>', {
'class': 'col-md-3'
})).append($('<div/>', {
'class': 'col-md-9',
'id' : 'eenwoordlol[' + ID123 + ']'
}));
var mainCol9 = ($('<div/>', {
'class': 'col-md-9'
}));
$('#eenwoordlol').val(exercise.word);
exer.append(mainCol3);
exer.append(mainCol9);
exer.append('<br/>');
$("#exerciseField").append(exer);
});
}
The HTML code: HTML代码:
<div class="exerciseField" id="exerciseField">
</div> <!-- end of exerciseField-->
The console.log()
does show that I have a word in my JSON file (I know the looping works and it does fetch, but I can't seem to display it), but it doesn't show any given error. console.log()
确实显示了我的JSON文件中有一个单词(我知道循环可以正常工作,并且确实可以提取,但是似乎无法显示它),但是它没有显示任何给定的错误。 So what am I missing out on? 那我错过了什么呢?
$('#eenwoordlol')
will not find anything because the actual id is #eenwoordlol[0]
. $('#eenwoordlol')
找不到任何东西,因为实际的ID是#eenwoordlol[0]
。 If you want to select this in a css selector you need to escape the brackets. 如果要在CSS选择器中选择此选项,则需要转括号。
Also val
is used for inputs, use text()
to set text content: val
也用于输入,请使用text()
设置文本内容:
$('#eenwoordlol\[0\]').text(exercise.word);
However, this will not work because the element is not even in the DOM, yet. 但是,这将不起作用,因为该元素甚至不在DOM中。 I suggest adding a variable, instead of appending immediately and performing a second lookup later:
我建议添加一个变量,而不是立即附加并稍后执行第二次查找:
var content = $('<div/>', {
'class': 'col-md-9',
'id' : 'eenwoordlol[' + ID123 + ']'
});
content.text(exercise.word);
var mainCol3 = ($('<div/>', {
'class' : 'col-md-3'
})).append($('<div/>', {
'class': 'row'
})).append($('<div/>', {
'class': 'col-md-3'
})).append(content);
var mainCol9 = ($('<div/>', {
'class': 'col-md-9'
}));
Four problems: 四个问题:
.val()
is for input fields and textareas; .val()
用于输入字段和文本区域; to insert text into a regular dom node use .text()
or .html()
. .text()
或.html()
。 val()
on a nonexistent DOM node '#eenwordlol'. val()
。 Create a main row with col 3 and col 9, within the col 3 I create another row with col 3 and col 9 (on the col 9 the word would be append and the col 3 an audio button) and then I have a col 9 left and within that I wanted to create 4 times a col 3
用col 3和col 9创建一个主行,在col 3中,我用col 3和col 9创建另一行(在col 9上将附加单词,col 3是音频按钮),然后我有了col 9左边,在那我想创建4次col 3
var ID123 = 0; // You probably don't want to use a global variable for this, but let that slide for now var fakejson = { // extrapolating this based on the code main_object: { main_object: { exercises: [{ word: "one" }, { word: "two" }, { word: "three" } ] } } } function createExercise(json) { const exercises = json.main_object.main_object.exercises; exercises.forEach(function(exercise) { var exer = $('<div/>', { 'class': 'row' }) .append( $('<div/>', { 'class': 'col-md-3' }) .append( $('<div/>', { 'class': 'row' }) .append($('<div>', { class: 'col-md-3', text: "(button here)" })) .append($('<div>', { class: 'col-md-9', 'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries text: exercise.word })) ) ).append( $('<div>', { class: 'col-md-9', text: "(4 x col-3 here)" }) ); $("#exerciseField").append(exer); ID123++; }); } createExercise(fakejson);
div { /* Just to make structure visible */ border: 1px solid; padding: 2px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="exerciseField" id="exerciseField"> </div>
To be honest, that's a complicated enough structure that instead of carefully nesting all those .append()
rules you might be better off just writing out the html string directly: 老实说,这是一个足够复杂的结构,与其直接嵌套所有这些
.append()
规则,不如直接写出html字符串可能会更好:
var exer = $('<div class="row"><div class="col-md-3">' + exercise.word + '</div>...etc...</div>');
If the eenwoordlol[...]
IDs are only used for the text insertion in this function, you can safely remove them, since the text can instead just be inserted when the node is constructed. 如果在此功能中仅将
eenwoordlol[...]
ID用于文本插入,则可以安全地删除它们,因为可以在构造节点时插入文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.