Question

我在jquery和JSON的帮助下创建了一些动态表单，并将字符串JSON创建为html div id。当我想将这些JSON合并到单个数组中时，它不是一个正确的JSON。请帮我创建一个。

HTML DATA

<div id="dataStore">
<div class="col-md-4" style="border:1px solid #ccc;">
<h5>Column 1</h5>
<div id="dataStore1" class="connectedSortable ui-sortable">
  <div id="field1" class="fieldData" style="display:block">
    <div id="titlefield1" class="fieldTitle">field1</div>
    <span class="glyphicon glyphicon-remove removeButton" id="crossfield1"></span>
    <div id="datafield1" style="visibility:hidden" class="hiddenVis">{"field1":[{"type":"text","label":"dsa","nameid":"das","placeholder":"das","is_req":"1"}]}</div>
  </div>
  <div id="field2" class="fieldData" style="display:block">
    <div id="titlefield2" class="fieldTitle">field2</div>
    <span class="glyphicon glyphicon-remove removeButton" id="crossfield2"></span>
    <div id="datafield2" style="visibility:hidden" class="hiddenVis">{"field2":[{"type":"text","label":"dsa","nameid":"dsa","placeholder":"dsa","is_req":"0"}]}</div>
  </div>
</div>

Jquery代码

var emptyData1 = '';
$('#dataStore1').find('.hiddenVis').each(function() 
        {
            emptyData1 = emptyData1 + $(this).html();
        });
if(emptyData1!='')
        {
            var json1 = '{"column1"'+':['+emptyData1+"]}";
        }

我的输出

{
"column1": [
    {
        "field1": [
            {
                "type": "text",
                "label": "dsa",
                "nameid": "das",
                "placeholder": "das",
                "is_req": "1"
            }
        ]
    }{
        "field2": [
            {
                "type": "text",
                "label": "dsa",
                "nameid": "dsa",
                "placeholder": "dsa",
                "is_req": "0"
            }
        ]
    }
]
}

预期输出

{
"column1": [
    {
        "field1": [
            {
                "type": "email",
                "label": "DSA",
                "nameid": "DAS",
                "placeholder": "dS",
                "is_req": "1"
            }
        ],
        "field2": [
            {
                "type": "Number",
                "label": "dAS",
                "nameid": "DSA",
                "placeholder": "dAS",
                "is_req": "0"
            }
        ]
    }
]
}

Answer 1

删除html上的外部{}。

<div id="datafield1" style="visibility:hidden" class="hiddenVis">"field1":[{"type":"text","label":"dsa","nameid":"das","placeholder":"das","is_req":"1"}]</div>

然后将其添加到jquery代码：

var emptyData1 = '';
$('#dataStore1').find('.hiddenVis').each(function() 
    {
        emptyData1 = emptyData1 + $(this).html();
    });
    if(emptyData1!='')
    {
        var json1 = '{"column1"'+':[{'+emptyData1+"}]}";
    }

Answer 2

JSON.parse和JSON.stringify可以帮助您完成此任务：

var data1 = {};

$('#dataStore1').find('.hiddenVis').each(function() {
    var itemData = JSON.parse($(this).html()); // To javascript object (object).

    for (var key in itemData) {
        data1[key] = itemData[key];
    }
});

var json1 = JSON.stringify({column1: data1}); // Back to JSON (string).

Answer 3

在你的javascript中做这个小改动我希望它对你有用:)

   var emptyData1 = '';
            $('#dataStore1').find('.hiddenVis').each(function() 
    {
        emptyData1 = emptyData1 +','+ $(this).html();
    });

    if(emptyData1!='')
    {
        emptyData1 = emptyData1.replace(',', '');
        var json1 = '{"column1"'+':['+emptyData1+"]}";
        console.log(JSON.parse(json1));
        alert(json1);
    }

Answer 4

这应该生成您发布的所需输出：

var theObject = {column1: [ {} ]};
$('#dataStore1').find('.hiddenVis').each(function() {
    var nextObject = JSON.parse($(this).html());
    theObject.column1[0][Object.keys(nextObject)[0]] = nextObject[Object.keys(nextObject)[0]]
});

console.log(theObject);

JSFiddle Here

如何在一个JSON数组中组合两个JSON数组

4 个答案: