L oop данные, полученные из val ()

Question

Я пытаюсь получить некоторые данные из скрытого элемента и l oop через него и получить его в массиве.

Элемент выглядит следующим образом:

<input class="test" type="hidden" name="fwrls" value='[{"comment":"test1","policy":"deny","proto":"any"},{"comment":"test2","policy":"allow","proto":"any""}]'>

Сейчас когда я беру это с jquery:

$(document).ready(function () {
var data = $(".test").val();
  console.log(data);
  //test loop
  for (var i = 0; i < data.length; i++) {
    console.log(data[i]);
  } 
});

Но оно проходит через каждый символ вместо каждого {} в [].

Чего мне не хватает?

JS Корзина для справки: https://jsbin.com/madaquyepa/edit?html, js, консоль, выход

Answer 1

Когда вы получаете значение элемента ввода, это строка (на самом деле JSON). Итак, сначала вам нужно будет пропустить его через JSON.parse().

Примечание: в самом конце строки есть посторонний ", что приведет к ошибке, если вы попытаетесь разобрать его. Не забудьте исправить это сначала.

$(document).ready(function() {
  var data = JSON.parse($(".test").val());
  console.log(data);

  for (var i = 0; i < data.length; i++) {
    console.log(data[i]);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="test" type="hidden" name="fwrls" value='[{"comment":"test1","policy":"deny","proto":"any"},{"comment":"test2","policy":"allow","proto":"any"}]'>

Для версии ES6, в которой даже не используется jQuery:

const data = JSON.parse(document.querySelector('.test').value);
console.log(data);

for (let datum of data) {
  console.log(datum);
}

<input class="test" type="hidden" name="fwrls" value='[{"comment":"test1","policy":"deny","proto":"any"},{"comment":"test2","policy":"allow","proto":"any"}]'>