比较两个JSON数组并重新排列新的JSON数组格式

Question

这是我的第一个JSON数组格式。。。

[
    {
        "id": "1234",
        "caption": "caption1"
    },
    {
        "id": "2345",
        "caption": "caption2"
    },
    {
        "id": "3456",
        "caption": "caption3"
    }
]

这是另一个JSON数组格式

[
    [
        {
            "id": "1234",
            "value": "value11"
        },
        {
            "id": "2345",
            "value": "value12"
        },
        {
            "id": "3456",
            "value": "value13"
        }
    ],
    [
        {
            "id": "1234",
            "value": "value21"
        },
        {
            "id": "2345",
            "value": "value22"
        },
        {
            "id": "3456",
            "value": "value23"
        }
    ]
]

上面提到的两个JSON数组，我需要将每个数组与Id进行比较，并需要使用javascript格式化一个带有标题和值的新JSON数组。

[
    [
        {
            "caption" : "caption1",
            "value":"value11"
        },
       {
            "caption" : "caption2",
            "value":"value12"
       },
       {
            "caption" : "caption3",
            "value":"value13"
       }
    ],
    [
       {
            "caption" : "caption1",
            "value":"value21"
       },
       {
           "caption" : "caption2",
           "value":"value22"
       },
       {
            "caption" : "caption3",
            "value":"value23"
       }
    ]
]

请帮帮我。

Answer 1

您可以通过多种方式来实现。下面我展示了两种变体：

选项1：纯JavaScript

在这个例子中，程序预先为第一个数组建立索引，以便更快地访问它的数据，然后用map((函数在第二个数组上循环，创建新的数组数组：

// Create index version of first array
var aix = {};
for(var i=0;i<arr1.length;i++) {
    aix[arr1[i].id] = arr1[i].caption;
}
// Loop over array of arrays
var res1 = arr2.map(function(arr22){
    return arr22.map(function(a){
        return {caption:aix[a.id], value:a.value};
    }
});

选项2：使用特殊的SQL库(Alasql(

在这里，您可以使用特殊的SQL语句自动加入数组：

var res2 = arr2.map(function(a){
    return alasql('SELECT arr1.caption, a.[value] 
                       FROM ? a JOIN ? arr1 USING id',[a,arr1]);
});

您可以在下面的工作片段中尝试这些变体，也可以在jsFiddle中使用它。

(免责声明：我是Alasql的作者(

var arr1 = [
    {
        "id": "1234",
        "caption": "caption1"
    },
    {
        "id": "2345",
        "caption": "caption2"
    },
    {
        "id": "3456",
        "caption": "caption3"
    }
];
var arr2 = [
    [
        {
            "id": "1234",
            "value": "value11"
        },
        {
            "id": "2345",
            "value": "value12"
        },
        {
            "id": "3456",
            "value": "value13"
        }
    ],
    [
        {
            "id": "1234",
            "value": "value21"
        },
        {
            "id": "2345",
            "value": "value22"
        },
        {
            "id": "3456",
            "value": "value23"
        }
    ]
];
// JavaScript version
var aix = {};
for(var i=0;i<arr1.length;i++) {
    aix[arr1[i].id] = arr1[i].caption;
}
var res1 = arr2.map(function(arr22){
    return arr22.map(function(a){
        return {caption:aix[a.id], value:a.value};
    });
});
document.getElementById("res1").textContent = JSON.stringify(res1);
// Alasql version
var res2 = arr2.map(function(a){
    return alasql('SELECT arr1.caption, a.[value] FROM ? a JOIN ? arr1 USING id',[a,arr1]);
});
document.getElementById("res2").textContent = JSON.stringify(res2);

<script src="http://alasql.org/console/alasql.min.js"></script>
<p>Varian 1: JavaScript</p>
    <div id="res1"></div>
<p>Variant 2: Alasql</p>
<div id="res2"></div>