时间戳

首页 > 解决方案 > 如何通过jquery制作一个json

javascript - 如何通过jquery制作一个json

问题描述

这是我的 html 正文：

<div class="container">
  <div class="wrapper-items">
    <div class="item">
      <input type="checkbox" value="5da1dc651d01" class="idCheck">
      <div class="inner-item">
        <li><input class="SelectdItem" type="checkbox" value="_root.room__0.passenger__1" data-type="2" data-name="test test"></li>
        <li><input class="SelectdItem" type="checkbox" value="_root.room__0.passenger__2" data-type="1" data-name="test2 test2"></li>
      </div>
    </div>
    <div class="item">
      <input type="checkbox" value="8da1dc651d56" class="idCheck">
      <div class="inner-item">
        <li><input class="SelectdItem" type="checkbox" value="_root.room__0.passenger__1" data-type="2" data-name="test test"></li>
        <li><input class="SelectdItem" type="checkbox" value="_root.room__0.passenger__2" data-type="1" data-name="test2 test2"></li>
      </div>
    </div>
  </div>
  <span class="handleClick">Check</span>
</div>

我想根据html中的信息制作一个json，如下所示：

[{
    sid: "5da1dc651d01",
    passengers: [{
        "room__0.passenger__1": "test test",
        type: "2"
      },
      {
        "room__0.passenger__2": "test2 test2",
        type: "2"
      }
    ]
  },
  {
    sid: "8da1dc651d56",
    passengers: [
      {
        "room__0.passenger__1": "test test",
        type: "2"
      },
      {
        "room__1.passenger__1": "test2 test2",
        type: "2"
      }
    ]
  }
];

首先通过单击handleClickspan 检查哪个idCheck被选中，然后如果每个都选中，则将在 object sidin 中设置值json。下一个SelectdItem复选框将被选中，如果它被选中，属性将value被添加到一个名为 的数组 中。主要问题是，通过检查第一个，将由一个对象生成并且没有问题，但是通过检查第二个 ，第一个对象将被删除，第二个对象将重复两次。data-typedata-namejsonpassengersidCheckjsonidCheck

    $(".handleClick").click(function (e) {
    var optionalservices = [];
    var serveiceInfo = {};
    var lenOptional = $(this).closest(".container").find(".item").length;
    for (var i = 1; i <= lenOptional; i++) {
        if ($(this).closest(".container").find(".item:nth-child(" + i + ")").find(".idCheck").is(':checked')) {
            var valueInput = $(this).closest(".container").find(".wrapper-items").find(".item:nth-child(" + i + ")").find(".idCheck").val()
            serveiceInfo["sid"] = valueInput;
            var lenPassengers = $(this).closest(".container").find(".wrapper-items").find(".item:nth-child(" + i + ")").find(".inner-item li").length
            var ArrayPassengers = []
            for (var j = 1; j <= lenPassengers; j++) {
                if ($(this).closest(".container").find(".wrapper-items").find(".item:nth-child(" + i + ")").find(".inner-item li:nth-child(" + j + ")").find(".SelectdItem").is(':checked')) {
                    var key = $(this).closest(".container").find(".wrapper-items").find(".item:nth-child(" + i + ")").find(".inner-item li:nth-child(" + j + ")").find(".SelectdItem").val()
                    var valName = $(this).closest(".container").find(".wrapper-items").find(".item:nth-child(" + i + ")").find(".inner-item li:nth-child(" + j + ")").find(".SelectdItem").attr('data-name')
                    var valType = $(this).closest(".container").find(".wrapper-items").find(".item:nth-child(" + i + ")").find(".inner-item li:nth-child(" + j + ")").find(".SelectdItem").attr('data-type')
                    ObjPassenger = {}
                    ObjPassenger[key] = valName
                    ObjPassenger["type"] = valType
                    ArrayPassengers.push(ObjPassenger)

                }
                serveiceInfo["passengers"] = ArrayPassengers
            }
            optionalservices.push(serveiceInfo)
        }

    }


});

标签： javascriptjquery

解决方案

我会做的有点不同，更具可读性

const objectArray = new Array();
$('.wrapper-items item').each(function(){
  const checkboxValue = this.find('input#idCheck').val();
  let currentObject = new Object();
  currentObject.passengers = new Array();
  currentObject.sid = checkboxValue;

  this.find('.inner-item input:checked').each(function(){
    let passengerObject = new Object();
    passengerObject[this.val()] = this.attr('data-name');
    passengerObject['type'] = this.attr('type');
    currentObject.passengers.push(passengerObject);
  })

  objectArray.push(currentObject);
})

///objectArray will contain the data.

推荐阅读