交叉匹配具有相同值但名稱不同的兩個 JSON 文件以從這兩個文件中創建一個表

Question

我想從兩個不同的 JSON 文件創建一個表構建。 其中一位向我展示了姓名、工作職位和年齡。 另一個向我展示了電子郵件、姓名以及他們的工作職業。 但是，對於相同的值，它們具有不同的名稱並且順序不同。 我使用 mustache.js 來呈現數據，但我注意到文件的順序不同，因此名稱與電子郵件不匹配，因為我通過獲取兩個不同的文件來構建表。

 var text = '[ { "occupation": "SV", "name": "Mark", "age":21 }, { "occupation": "PE", "name": "Jeff", "age":24 }, { "occupation": "MH", "name": "Steven", "age":20 }, { "occupation": "GP", "name": "Briana", "age":22 } ]' var text2 = '[ { "position": "PE", "id": "Jeff", "Email":"jeff@gmail.com" }, { "position": "SV", "id": "Mark", "Email":"mark@gmail.com" }, { "position": "GP", "id": "Briana", "Email":"briana@gmail.com" }, { "position": "MH", "id": "Steven", "Email":"steven@gmail.com" } ]' var obj = JSON.parse(text); $(document).ready(function() { var template = $('#user-template').html(); for(var i in obj) { var info = Mustache.render(template, obj[i]); $('#ModuleUserTable').html(info); } }); var obj2 = JSON.parse(text2); $(document).ready(function() { var template2 = $('#user-template2').html(); for(var i in obj2) { var info = Mustache.render(template2, obj2[i]); $('#ModuleUserTable2').html(info); } });

 <table border="1" id = "ModuleUserTable"> <tr> <th>FullName</th> <th>Work</th> <th>Age</th> </tr> </table> <script id="user-template" type="text/template"> <tr> <td>{{name}}</td> <td>{{occupation}}</td> <td>{{age}}</td> </tr> </script> <table border="1" id = "ModuleUserTable2"> <tr> <th>FullName</th> <th>Work</th> <th>Email</th> </tr> </table> <script id="user-template2" type="text/template"> <tr> <td>{{id}}</td> <td>{{position}}</td> <td>{{Email}}</td> </tr> </script>

我想合並數據，所以我可以在一張表中包含所有值。 所以我將姓名、年齡、工作和電子郵件合二為一。 我還有一個來自女巫的第三個 Json，我只能得到他們的名字，但在文件中它的名稱也不同，只有值相同，所以它看起來像“user135”：“Jeff”。 我正在考慮做這樣的事情，但我不知道如何正確地做：

 function(nameuser) for (var name) { if(name."user135 == "Jeff"){ jQuery( Mustache.render($('#ModuleUserTable').html(), name)).appendTo("#ModuleUserTable2"); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Answer 1

此代碼將通過匹配 id 和 name 屬性完成第二個列表中的第一個列表項。 可以在table里面探索list1的結果情況；

 var list1 = [ { "occupation": "SV", "name": "Mark", "age":21 }, { "occupation": "PE", "name": "Jeff", "age":24 }, { "occupation": "MH", "name": "Steven", "age":20 }, { "occupation": "GP", "name": "Briana", "age":22 } ]; var list2 = [ { "position": "PE", "id": "Jeff", "Email":"jeff@gmail.com" }, { "position": "SV", "id": "Mark", "Email":"mark@gmail.com" }, { "position": "GP", "id": "Briana", "Email":"briana@gmail.com" }, { "position": "MH", "id": "Steven", "Email":"steven@gmail.com" } ]; function findSource(name){ let temp = null; $(list2).each((index,object)=>(temp==null && object.id == name) ? temp=object : 0); return temp; } function complete(object){ let source = findSource(object.name); if(source!=null&&source!=undefined){ object.position = source.position; object.Email = source.Email; } } function addToTable(object){ let tr= $("<tr>"); $(tr).append("<td>" + object.occupation + "</td>"); $(tr).append("<td>" + object.name + "</td>"); $(tr).append("<td>" + object.age + "</td>"); $(tr).append("<td>" + object.position + "</td>"); $(tr).append("<td>" + object.Email + "</td>"); $("#ModuleUserTable2").append(tr); } $(list1).each((index,item)=>{ complete(item); addToTable(item); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1" id = "ModuleUserTable2"> </table>