2

Чёт не могу раздуплить кусочек кода, из json приходит ответ сервера, создаю таблицу динамически и добавляю на страницу, в результате вижу [object Object], а не созданный html.

Цель - создать несколько инпутов с разными value, затем обернуть дивом, создать так несколько строк и вывести на страницу.

Код:

    var _html = '',
    _s = '<input type="text" value="" name="">';

for (var i = 0; i < response.length; i++) {

    var _row = '';
    _row += $(_s).attr('value', response[i].nid);

    // _row += $(_s).attr('value', response[i].oid);
    // _row += $(_s).attr('value', response[i].town);

    $(_row).wrap('<div class="line"></div>');
    _html += _row;
}
$('#res').html(_html);

Если _row = $(_s).attr('value', response[i].nid); без знака плюс, то хтмл выводится, если += - бяка.

3
  • Вы пытаетесь строку сложить с объектом _html += _row; 7 апр 2016 в 19:26
  • @VladimirMorulus и что тут во что надо преобразовать? 7 апр 2016 в 19:32
  • Надо изучать javascript 7 апр 2016 в 19:39

2 ответа 2

4

Как и было сказано в комментариях, вы складываете к переменной _html, которая содержит в себе строку, переменную _row который является jQuery объектом. Соотвественно, из-за не совпадения типов у объекта вызывается метод .toString() который и возращает вам строчку [object Object].

В Вашем примере надо работать либо с строчками либо с объектами. Лучше всего с объектами работать.

Пример на jsfiddle.

var _html = '',
  _s = '<input type="text" value="" name="">',
  response = [{
    nid: 1
  }, {
    nid: 2
  }];
for (var i = 0; i < response.length; i++) {

  var _row = $(_s).attr('value', response[i].nid);
  var div = $('<div class="line"></div>');
  div.append(_row);
  $('#res').append(div);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="res">

</div>

1
  • да, именно так и требовалось, призабыл про данную возможность. 8 апр 2016 в 7:44
3

Если посмотреть в справку по jQuery.attr можно увидеть, что если эта функция используется как сеттер, то возвращаемое значение - jQuery object.

Таким образом в строка

_row += $(_s).attr('value', response[i].nid)

равносильна

""+{}

которая приводит к преобразованию объекта в строку, а по умолчанию для объектов выводится

[object Object]

Кроме этого есть еще одна, не очевидная ошибка. Метод wrap - работает только с элементами которые уже являются вложенными куда-либо. Поэтому вместо него лучше использовать append, или appendTo

Ну и для работы с массивами можно использовать map, reduce и т.д.

Например:

var _line = '<div class="line"></div>',
  _s = '<input type="text" value="" name="">';

var response = [{
  nid: 10,
  oid: 11,
  town: 'twn'
}, {
  nid: 110,
  oid: 111,
  town: '1twn'
}];

$('#res').append(
  response.map(function(el) {
    return Object.keys(el).reduce(function(row, key) {
      return row.append(
        $(_s).attr('value', el[key])
      );
    }, $(_line));
  })
);
.line {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="res"></div>

Один из вариантов решения вопроса в комментарии

var _line = '<div class="line"></div>',
  _s = '<input type="text" value="" name="">';

var response = [{
  nid: 10,
  oid: 11,
  town: 'twn'
}, {
  nid: 110,
  oid: 111,
  town: '1twn'
}];

$('#res').append(
  response.map(function(el) {
    return Object.keys(el).reduce(function(row, key) {
      return row.append(
        $(_s).attr('value', el[key]).addClass(key)
      );
    }, $(_line)).find('.oid').after($('<a href="url">Link</a>')).end();
  })
);
.line {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="res"></div>

5
  • Если после инпута oid еще добавить ссылку <a>ссылка</a>, которой нет в входящем массиве, как лучше поступить? Очевидное - if( key == ) { return row.append() } else ( return row.append (ссылка)) 8 апр 2016 в 8:05
  • @Jean-Claude, добавил еще пример в ответ. Но все зависит от конечной разметки, и какие варианты вообще могут быть, то есть что именно и куда может потребоваться вставить
    – Grundy
    8 апр 2016 в 8:13
  • набросал так jsbin.com/hudujupete/edit?js,output ясно, в дополнении как раз подобное. 8 апр 2016 в 8:15
  • @Jean-Claude, обновил ответ
    – Grundy
    8 апр 2016 в 8:34
  • окок, пасиб.... 8 апр 2016 в 8:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.