Итерация по данным json с помощью jquery

Question

Когда я предупреждаю вывод в примере ниже, я получаю правильный вывод, но когда я console.log вывод, я получаю: Number {}

"width": [ 25, 50, 75, 100 ],

jQuery.each(width, function() {
  new_width = this;
  console.log(new_width);
  alert(new_width);
  document.querySelectorAll('#source').forEach(function (element, index) {
    element.style.width = new_width;
  });
});

Answer 1

Проблема в том, что вы используете jQuery.each() для циклического перемещения по массиву. При доступе через this вы получаете объект Number, а не целочисленное значение, следовательно, {} вывод в журнал. Есть несколько способов исправить это:

1) Использовать аргументы, переданные функции вместо ссылки this:

var foo = { "width": [ 25, 50, 75, 100 ] }
jQuery.each(foo.width, function(i, value) {
  console.log(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2) Используйте toString() или valueOf() на объекте. Примечание: alert() в вашем вопросе работает, потому что он вызывает toString() под капотом.

var foo = { "width": [ 25, 50, 75, 100 ] }
jQuery.each(foo.width, function() {
  console.log(this.toString());
  console.log(this.valueOf());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3) Не используйте jQuery для циклического перебора простого массива значений. Используйте forEach() петлю:

var foo = { "width": [ 25, 50, 75, 100 ] }
foo.width.forEach(function(value) {
  console.log(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Я предпочитаю последний метод, но любой из них работает.