Question

我想以JSON格式打印一些数据以供其他应用使用。我应该如何构造Javascript对象来动态创建JSON格式。

这是我的HTML代码：

<div class="col-sm-6">
    <div class="form-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">
        <select name="gender" class="form-control" data-conv="json">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <input type="date" class="form-control" name="dob" data-conv="json">
        <input type="text" class="form-control" name="email" data-conv="json">
    </div>
    <div class="form-group">
        <button type="button" class="btn-action" class="btn btn-default">Create</button>
    </div>
</div>

我尝试使用以下Jquery代码：

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];
        $("input[data-conv=json]").each(function() {
            var firstname = $(input[name=frstname]).val();
            var lastname  = $(input[name=lastname]).val();
            var gender    = $(input[name=gender]).val();
            var dob       = $(input[name=dob]).val();
            var email     = $(input[name=email]).val();

            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;

            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

我收到错误：

未捕获的ReferenceError：未定义输入

任何帮助将不胜感激！

Answer 1

我收到错误：

未捕获的ReferenceError：未定义输入

您需要使用'或"

包装选择器中的每个输入

var firstname = $('input[name=frstname]').val();
var lastname  = $('input[name=lastname]').val();
var gender    = $('input[name=gender]').val();
var dob       = $('input[name=dob]').val();
var email     = $('input[name=email]').val();

你在这里所做的一样：

$("input[data-conv=json]").each(function() {

虽然如果你有一个论坛与这些控件你不需要每个： -

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];

        var firstname = $('input[name=frstname]').val();
        var lastname  = $('input[name=lastname]').val();
        var gender    = $('input[name=gender]').val();
        var dob       = $('input[name=dob]').val();
        var email     = $('input[name=email]').val();

        item = {}
        item ['firstname']  = firstname;
        item ['lastname']   = lastname;
        item ['gender']     = gender;
        item ['dob']        = dob;
        item ["email"]      = email;

        jsonObj.push(item);

        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

但是如果你有倍数，你需要给元素组提供一个类： -

<div class="form-group inputs-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">

然后each使用find：

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];
        $(".inputs-group").each(function() {
            var firstname = $(this).find('input[name=frstname]').val();
            var lastname  = $(this).find('input[name=lastname]').val();
            var gender    = $(this).find('input[name=gender]').val();
            var dob       = $(this).find('input[name=dob]').val();
            var email     = $(this).find('input[name=email]').val();

            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;

            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

如何使用jquery为每个输入值创建JSON

1 个答案: