使用Jquery从HTML创建JSON对象

我想使用JQuery创建JSON对象。我已经编写了JQuery代码，但它无法正常工作。这里我在StackExchange中添加了JQuery代码

HTML:

应为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": "" }
            ]
        }
    ]
}

---

这不是完美的答案

下面的代码将帮助你得到你想要的

但这个答案非常清楚。可能有一些虫子

如果得到正确答案，请运行更多JQuery的每个和选择器

//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']

但数组的值类型可以接受对象

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

您必须了解对象和数组的这种区别

---

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

这纯粹是一个学术练习吗？不是练习。。。在我们的项目中，我们在客户端使用100%JQuery和AngularJS。通常您使用AngularJS模板将json转换为HTML。你到底为什么要做相反的事？！我正在保存数据，我们在这里使用POST[REST API service]方法。使用angularjs模板呈现数据，并使用内置的双向数据绑定更新json对象。然后将其发送到端点。这是使用Angularjs（或任何JS框架）{“步骤”：{“名称”：“DA3”，“请求参数”：[{“操作名称”：“Dn3”}，[{“键”：“O1”，“值”：“A”}]，{“键”：“O2”，“值”：“D”}]，{“键”：“On3”，“值”：“}]}}我需要“请求参数”：{“AName”：“A1”，“AOptions”：[{“键”：“O1”，“值”：“V1”}，{“键”：“O2”，“值”：“V2”}]}没有人会想要维护这段代码。你永远不应该将HTML解析为JSON。HTML的布局永远不应该改变JSON数据结构。这是现存最脆弱的代码。

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

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