отображение объекта JSON в отдельные элементы div

0

Я пытаюсь поместить все имена объектов в 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. Как я могу это сделать?

  • 0
    Покажите нам свой HTML .
Теги:

2 ответа

2
Лучший ответ

Как насчет повторения имен и добавления каждого?

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');
});
  • 0
    ну, с этим, я полагаю, в итоге у вас есть $.map и forEach ... два цикла, которые не нужны, не так ли?
  • 0
    @bipen нет, вы можете так же легко поместить весь код в первый цикл ...
1

использовать $.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");

    });

  }); 

Ещё вопросы

Сообщество Overcoder
Наверх
Меню