通过Jquery动态创建JSON对象

时间:2019-05-25 07:25:22

标签: jquery json laravel

我想要这种序列化形式的数据,我正在查看许多示例,但工作不正常。我的代码在这里-

<select class="awe-select" name="rooms" id="rooms">                                         
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
 </select>
<button class="awe-btn-default submit" type="submit">BOOK </button>

   <script type="text/javascript">
$(document).ready(function() {
    $("#rooms").change(function() {
        var selVal = $(this).val();
        $("#textboxDiv").html('');
        if(selVal > 0) {
            for(var i = 1; i<= selVal; i++) {
                $("#textboxDiv").append("<div class='check_availability_group'><span class='label-group'>ROOM </span><div class='check_availability-field_group'><div class='check_availability-field'><label>Adult</label><select name='adult' id='adult' class='form-control activeInput' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></div><div class='check_availability-field'><label>Children</label><select class='form-control activeInput' id='children' name='children' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option  value='4'>4</option><option value='5'>5</option></select></div></div></div>");
            }
        }
    });
});
</script>

json代码在这里-

<script>
$(document).ready(function() {
    $(".submit").click(function() {
    var array = [];
$("select[class=activeInput]").each(function() {
    array.push({
        adult: $(this).val(),
        children: $(this).val()
    });
});
});
});
// then to get the JSON string
var jsonString = JSON.stringify(array);
console.log(jsonString)
}
</script>

我希望成人和儿童数据按照房间格式设置,例如-

 "rooms": [
           {                       
          "children": 0,
           "adults": 1
           },
           {
            "children": 1,
             "adults": 2,                       
            }
         ]

1 个答案:

答案 0 :(得分:0)

请在下面找到链接: https://jsfiddle.net/ulric_469/5986mpxd/31/

   Widget customTheme() {
    return StreamBuilder(
      //initialData: true,
      stream: customToggleBloc.customToggleStream,
      builder: (BuildContext context, snapShot) {
        if(snapShot.hasData){
          print(snapShot.data.toString());
          return GestureDetector(
             onTap: (){
               widget?._callback(snapShot.data == true ? 'custom' : 'clearcustom') ;  //Section A
        },
            child: Container(
              width: menuButtonSize + 8,
              height: menuButtonSize + 8,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppState.brownTheme,
                boxShadow: [
                   BoxShadow(
                    color: Colors.black,
                    blurRadius: 25,
                   ),
                ],
              ),
              child: new IconTheme(
                data: new IconThemeData(
                  color: Colors.white,
                  size: 35,
                ),
                child:  Icon(snapShot.data == true ? Icons.add_photo_alternate : Icons.cancel),  // Section B
              ),
            ),
          );
        }else{
          return Center(
            child: CircularProgressIndicator(),
         );
       }
     }
   );
 }

JS:

onSelectChange = selectedRowKeys => {
    if (selectedRowKeys.length > 1) {
      const lastSelectedRowIndex = [...selectedRowKeys].pop();
      this.setState({ selectedRowKeys: lastSelectedRowIndex });
    }
    this.setState({ selectedRowKeys });
    console.log('selectedRowKeys changed: ', selectedRowKeys);
  };

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <React.Fragment>
        <div style={{ marginBottom: 16 }} />
        <Table
          rowSelection={rowSelection}
          columns={columnEvaluation}
          dataSource={result}
        />
      </React.Fragment>
    );
  }