交叉匹配两个具有相同值但不同名称的 JSON 文件，从这两个文件中创建一个 table

Question

我想从两个不同的 JSON 文件创建一个 table 构建。其中一位向我展示了姓名、工作职位和年龄。另一个显示了电子邮件、姓名以及他们的工作职业。但是，它们对于相同的值有不同的名称并且顺序不同。我使用 mustache.js 来呈现数据，但我注意到文件的顺序不同，因此名称与电子邮件不匹配，因为我通过获取两个不同的文件来构建 table。

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>

我想合并数据，这样我就可以将所有值都集中在一个 table 中。所以我将姓名、年龄、工作和电子邮件合而为一。我还有一个来自的第 3 个 Json 我只能得到他们的名字，但在文件中它的名字也不同，只是值相同所以它看起来像“user135 “：”杰夫“。我正想做这样的事情，但我不知道怎么做才对：

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>

交叉匹配两个具有相同值但不同名称的 JSON 文件，从这两个文件中创建一个 table

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

javascript

jquery

json

mustache