Crossmatch two JSON files with the same values but different name to make a table from the two

Question

I want to create a table build from two different JSON files. One of them shows me the names, work position, and age. The other shows me emails, name and also their work occupation. However, they have different names for the same values and are in different order. I used mustache.js to render the data, but I noticed the files have different order, so the names did not match the emails, as I build my table from fetching the two different files.

 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>

I want to combine the data, so I can have all values in one table. So I have name, age, work, and email in one. I also have a 3rd Json from witch I can get their names only, but in the file the name of it is also different and it is only the value that is the same so it looks like "user135":"Jeff". I was thinking of doing something like this, but I do not know how to do it right:

 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

This code will complete the first list items from second list via matching id and name properties. You can explore the result situation of list1 inside of the table;

 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>