javascript - 从 span 的数据元素创建 json 数组

Question

我是 JSON 新手，我正在尝试创建一个 json 数组，我可以将其发送到 php 文件进行处理。我希望 json 看起来类似于下面的内容。

{"clubs":[
{"number":"12", "type":"break"}, 
{"number":"4", "type":"group"}, 
{"number":"87", "type":"tring"},
{"number":"7", "type":"samestuff"}
]}

我可以将元素放入一个数组中，但结果如下: 类型:break，数量:12，类型:group，数量:4，类型:tring，数量:87，类型:samestuff，数量:7

任何人都可以解决这个问题，以便它创建一个数字/类型的 json 数组吗？我在下面附上了我当前的代码。

$(document).ready(function() {
    $("#testbutton").click(function() {
            var clubs = [];
            $(".spanme").each(function() {
            var myarray = [];
            var type = $(this).data("type");
            myarray.push("type:"+type);
            var number = $(this).data("number");
            myarray.push("number:"+number);
            clubs.push(myarray);
            });
        console.log(clubs)
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testbutton">Test button</button>
<span class="spanme" data-number="12" data-type="break">span </span>
<span class="spanme" data-number="4" data-type="group">span </span>
<span class="spanme" data-number="87" data-type="tring">span </span>
<span class="spanme" data-number="7" data-type="samestuff">span </span><br/>

预先感谢您的帮助

Answer 1

使用querySelectorAll获取公共(public)类的所有范围并使用map它将返回一个数组。使用 spread ... 将允许使用 map 等数组方法。使用 getAttribute 获取 data 属性

var x = [...document.querySelectorAll('.spanme')].map(function(item) {
  return {
    "numbers": item.getAttribute('data-number'),
    "type": item.getAttribute('data-type')
  }

})

var someObj = {
  "clubs": x

}
console.log(someObj)

<button id="testbutton">Test button</button>
<span class="spanme" data-number="12" data-type="break">span </span>
<span class="spanme" data-number="4" data-type="group">span </span>
<span class="spanme" data-number="87" data-type="tring">span </span>
<span class="spanme" data-number="7" data-type="samestuff">span </span><br/>