Question

我想使用JQuery创建JSON对象。我编写了JQuery代码，但它没有预期的工作。在这里，我已经在StackExchange中添加了我的JQuery代码。

HTML：

<div id="addconfigurations">
    <div class="action DummyAction2" id="10">
        <span class="actionname">DummyAction2</span>
        <div class="actionOptions">
            <span class="optionname">Option1</span>
            <select class="ddl" id="Option1">
                <option value="D">D</option>
                <option value="E">E</option>
            </select>
        </div>
        <div class="actionOptions">
            <span class="optionname">Option2</span>
            <span class="spantxtbox">
                <input name="text" class="txtbox" id="Option2" type="text">
            </span>
        </div>
    </div>
    <div class="action DummyAction3" id="20">
        <span class="actionname">DummyAction3</span>
        <span>Options:</span>
        <div>
        </div>
        <div class="actionOptions">
            <span class="optionname">Option1</span>
            <select class="ddl" id="Option1">
                <option value="AA">AA</option>
            </select>
        </div>
        <div class="actionOptions">
            <span class="optionname">Option2</span>
            <select class="ddl" id="Option2">
                <option value="DD">DD</option>
            </select>
        </div>
    </div>
</div>

JQuery的：

    var ScenarioDef = {};               

               var steps = [];

               $(".action").each(function () {
                   var $this = $(this);

                   steps.push({Name : $this.find('.actionname').text()});

                   var RequestParams = {};

                   RequestParams.ActionName = $this.find('.actionname').text()                      
                   steps.push(RequestParams);

                   var ActionOptions = [];
                   $this.find(".actionOptions").each(function () {

                       var $this1 = $(this);
                       if ($('.ddl').length) {
                           ActionOptions.push({
                               key: $this1.find('.optionname').text(),
                               value: $this1.find('.ddl :selected').text()
                           });
                       } else {
                           ActionOptions.push({
                               key: $this1.find('.optionname').text(),
                               value: $this1.find('.txtbox').text()
                           });
                       }

                   });
                   RequestParams.ActionOptions = ActionOptions;


               });

               ScenarioDef.steps = steps;

预期的JSON格式。

{

    "ScenarioDef": {
        "steps": [
            {
                "Name": "DummyAction2",
                "RequestParams": {
                    "ActionName": "DummyAction3",
                    "ActionOptions": [
                        { "key": "Option1", "value": "AA" },
                        { "key": "Option2", "value": "DD" },
                        { "key": "Option3", "value": "" }
                    ]
                },
            },
            {
                "Name": "DummyAction3",
                "RequestParams": {
                    "ActionName": "DummyAction3",
                    "ActionOptions": [
                        { "key": "Option1", "value": "AA" },
                        { "key": "Option2", "value": "DD" },
                        { "key": "Option3", "value": "" }
                    ]
                }
            }
                ]
            }
    }

我低于输出：

"ScenarioDef": {
    "steps": [
        { "Name": "DummyAction2" },
        {
            "ActionName": "DummyAction2",
            "ActionOptions": [ { "key": "Option1", "value": "D" },
                                { "key": "Option2", "value": "" } ]
        },
        { "Name": "DummyAction3" },
        {
            "ActionName": "DummyAction3",
            "ActionOptions": [
                { "key": "Option1", "value": "AA" },
                { "key": "Option2", "value": "DD" },
                { "key": "Option3", "value": "" }
            ]
        }
    ]
}

Answer 1

这不是完美的答案。

下面的代码将帮助您满足您的需求。

但这个答案非常明确。也许有一些错误。

如果您得到正确的答案，请运行更多JQuery＆lt; strong> 和选择器

//var ScenarioDef = [];
var ScenarioDef = {};

// $("#addconfigurations .action").each(function () {
$(".action").each(function () {
    // var steps = [];
    var steps = {};
    // steps.push({Name: $('.actionname1').text()});
    steps.Nmae = $('.actionname').text()

    //ScenarioDef.push(steps);
    ScenarioDef.steps=steps;

    //var RequestParams = [];
    var RequestParams = {};
    //RequestParams.push({ActionName: $('.actionname1').text()});
    RequestParams.ActionName= $('.actionname').text()


    //steps.push(RequestParams);
    steps.RequestParams = RequestParams;

    var ActionOptions = [];    
    $(".actionOptions").each(function () {
        // move to out of each
        //var ActionOptions = [];
        // IS NEW!!!
        var $this  = $(this);
        if ($('.ddl').length) {
            ActionOptions.push({
                //key: $('.optionname').text(),
                key: $this.find('.optionname').text(),
                //value: $('.ddl :selected').text()
                value: $this.find('.ddl :selected').text()
            });
        } else {
            ActionOptions.push({
                //key: $('.optionname').text(),
                key: $this.find('.optionname').text(),
                //value: $('.txtbox').text()
                value: $this.find('.txtbox').text()
            });
        }
        //RequestParams.push(ActionOptions);

    });
    RequestParams.ActionOptions = ActionOptions;

    console.log(ScenarioDef);

    var myJsonString = JSON.stringify(ScenarioDef);
    console.log(myJsonString);
});

你的答案问题是对象和数组的知识。

对象{}

对象具有键，值对，由冒号：

分隔

{name:'Jone', age:'7'}

数组[]

数组只有以逗号分隔的值

['Jone', 'Jane', 'Lora']

但是数组的值类型可以接受Object

[{name:'Jone', age:'7'}
,{name:'Jane', age:'8'}
,{name:'Lora', age:'9'}]

您必须了解对象和数组的这种差异。

这对于程序员来说，创建数据结构非常重要。

使用Jquery从HTML创建JSON对象

1 个答案: