javascript - 循环从 val() 获取数据

Question

我正在尝试从隐藏元素中获取一些数据并循环遍历它并将其放入数组中。

该元素如下所示:

<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 Bin 引用:https://jsbin.com/madaquyepa/edit?html,js,console,output

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"}]'>

对于甚至不使用 jQuery 的 ES6 版本:

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"}]'>