Я пытаюсь поместить все имена объектов в HTML, и я использую эту функцию.
function getExistingLinks() {
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
var names = data.map(function (i) {
return i['link'].name
});
document.querySelector(".link-names").innerHTML = names;
});
}
html очень прост:
<form id="addbookmark">
<p><label for="title">Title</label><br />
<input type="text" id="title" name="title" size="50" value="" /></p>
<p><label for="url">Url</label><br />
<input type="text" id="url" name="url" size="50" value="" /></p>
<p class="link-names"></p>
<p><input id="save" type="submit" value="Save Link" /></p>
</form>
Но в этой ситуации все имена ale в одном div.link-names, я бы предпочел поместить каждое имя в отдельный div.link-name. Как я могу это сделать?
Как насчет повторения имен и добавления каждого?
var container = document.querySelector(".link-names");
names.forEach(function(name) {
var div = document.createElement('div');
div.innerHTML = name;
container.appendChild(div);
div.setAttribute('class', 'link-name');
});
$.map
и forEach
... два цикла, которые не нужны, не так ли?
использовать $.each
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
$.each(data,function (i,v) {
var newDiv=$('<div />',{"class":"linkname",text:v.name});
$('.link-names').append(newDiv);
//or
$('<div />',{"class":"linkname",text:v.name}).appendTo(".link-names");
});
});