根据职位（角色名称）在 JSON 文件中分组输出答案

【问题标题】：Group output in JSON file according to job title (role name)根据职位（角色名称）在 JSON 文件中分组输出
【发布时间】：2020-12-16 17:26:26
【问题描述】：

下面的代码可以从我的 JSON 文件中输出数据。但是，我希望能够根据“角色名称”进行输出。因此，如果它是副主编，则应将人员信息放在该部分中。如果他们是编辑和首席，他们将被放置在该部分中。如果他们是编辑顾问委员会，他们被放在那个部分下面是我的 html，然后是我的 JS。首先，我复制了一些我的 json。

Json 数据：

[
  {
    "Journal: Journal Name": "Accounts of Chemical Research",
    "Role Name": "Editorial Advisory Board",
    "Gender": "Female",
    "Full Name": "Joanna Aizenberg",
    "Last Name": "Aizenberg",
    "Institution": "Harvard University",
    "Address1": "School of Engineering Applied Sciences",
    "Address2": "29 Oxford Street",
    "City": "Cambridge",
    "State/Province": "MA",
    "Country: Country Name": "United States",
    "Postal Code": "02138",
    "Country Region": "Western Hemisphere",
    "Journal Email": "jaiz@seas.harvard.edu",
    "Office Email": "jaiz@seas.harvard.edu",
    "Initial Appointment Date": "1/1/19",
    "Active Role Tenure Start Date": "1/1/19",
    "Active Role Tenure End Date": "12/31/20"
  },
  {
    "Journal: Journal Name": "Accounts of Chemical Research",
    "Role Name": "Editorial Advisory Board",
    "Gender": "Male",
    "Full Name": "Ayyappanpillai Ajayaghosh",
    "Last Name": "Ajayaghosh",
    "Department": "Chemical Sciences and Technology Division",
    "Institution": "CSIR-National Institute for Interdisciplinary Science and Technology",
    "Address1": "Industrial Estate PO, Pappanamcode",
    "City": "Thiruvananthapuram",
    "Country: Country Name": "India",
    "Postal Code": "695 019",
    "Country Region": "South Asia",
    "Office Email": "ajayaghosh62@gmail.com",
    "Other Email": "ajayaghosh62@gmail.com",
    "Initial Appointment Date": "1/1/17",
    "Active Role Tenure Start Date": "1/1/20",
    "Active Role Tenure End Date": "12/31/22"
  },
  {
    "Journal: Journal Name": "Accounts of Chemical Research",
    "Role Name": "Editorial Advisory Board",
    "Gender": "Male",
    "Full Name": "Scott L. Anderson",
    "Last Name": "Anderson",
    "Department": "Department of Chemistry",
    "Institution": "University of Utah",
    "Address1": "1224 Henry Eyring Building",
    "Address2": "315 S. 1400 E., Rm 2020",
    "City": "Salt Lake City",
    "State/Province": "UT",
    "Country: Country Name": "United States",
    "Postal Code": "84112",
    "Country Region": "Western Hemisphere",
    "Office Email": "anderson@chem.utah.edu",
    "Initial Appointment Date": "1/1/15",
    "Active Role Tenure Start Date": "1/1/18",
    "Active Role Tenure End Date": "12/31/20"
  }
]


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/masthead-old.js"></script>
<link rel="stylesheet" href="masthead.css">
</head>

HTML代码：

<body>
 <main>
  <!--<div id="editorList"></div>-->
  <div class="container-fluid">
   <h1>Journal of the American Chemical Society</h1>
    <div class="row">
     <div class="col-sm-12">
      <h2>Editor-in-Chief</h2>
      <div id="editorChief"></div>
      
     </div>
    </div> 
      
    <!--Associate Editors-->
    <div class="row">
     <div class="col-sm-12">
       <h2>Associate Editors</h2>
       <div id="associateEditor"></div>
      
     </div>
    </div> 
      
   <!--Editorial Advisory Board-->  
   <div class="row">
     <div class="col-sm-12">
      <h2>Editorial Advisory Board</h2>
       <div id="eab"></div>
     </div>
   </div> 
         
 </div>
  
</main>    
</body>
</html>

Javascript 代码：

$(document).ready(function() {
    
        
    
    
    $.getJSON("jci-test-file.json", function(dataJCI){
        console.log("hell0");
        //var journalName =dataJCI[i]["Journal: Journal Name"];
            //var fullName= dataJCI[i]["Full Name"];
            //var int=dataJCI[i]["Institution"];
              //$("#editorList").append("<h2>" + journalName + "</h2>").append("<h3>" + fullName + "</h3>").append ("<h4>" + int + "</h4>");
      

  
        
        editorList(dataJCI);
        
    });
    
    
  });




function editorList(dataArray){
    console.log("hello");
    var journalList=[];
    for(i in dataArray){
         if (dataArray[i]["Journal: Journal Name"]==="Journal of the American Chemical Society"){
             journalList.push(dataArray[i]);
        //Content of the current postion in dataArray has been placed inside my new array, which is journalList
     
         }
    
    }
    console.log(journalList);
    displayContent(journalList);
}


//group them by role name first before displaying content









//create a function to display the content
//Create proper HTML structure to properly format page. 

function displayContent(journalList){
    for(i in journalList){
       //var journalName =journalList[i]["Journal: Journal Name"];
       var fullName= journalList[i]["Full Name"];
       var int=journalList[i]["Institution"];  
        $("#editorList").append("<h3>" + fullName + "</h3>").append ("<h4>" + int + "</h4>"); 
     
        
    }
}

【问题讨论】：

你能把你的问题简化为一个最小的可重现的例子吗？

标签： javascript arrays json object

【解决方案1】：

这适用于您的数据，我已经测试过。

data.reduce((a,c) => {
  let role
  if(role = a.find(_a => _a["Role Name"] === c["Role Name"]))
    role.persons.push(c)
  else
    a = [
      ...a,
      { "Role Name": c["Role Name"], persons: [c] }
    ]
  return a 
},[])

[{…}]
  0:
    Role Name: "Editorial Advisory Board"
    persons: Array(3)
      0: {Journal: Journal Name: "Accounts of Chemical Research", Role Name: "Editorial Advisory Board", Gender: "Female", Full Name: "Joanna Aizenberg", Last Name: "Aizenberg", …}
      1: {Journal: Journal Name: "Accounts of Chemical Research", Role Name: "Editorial Advisory Board", Gender: "Male", Full Name: "Ayyappanpillai Ajayaghosh", Last Name: "Ajayaghosh", …}
      2: {Journal: Journal Name: "Accounts of Chemical Research", Role Name: "Editorial Advisory Board", Gender: "Male", Full Name: "Scott L. Anderson", Last Name: "Anderson", …}
      length: 3

【讨论】：

谢谢你。我很感激你花时间来看看这个。请问，你到底是在哪里添加的？
我很乐意提供帮助。我想我真的不明白你在问什么，呵呵，但如果你问我在哪里运行测试，只需在 Chrome Devtools 中复制/粘贴你的 json 数据并开始尝试在那里尝试解决方案。
如果某个答案解决了您的问题，请不要忘记将其标记为“正确答案”，以便社区知道该主题已完成，并且任何有类似问题的人都可以看到该解决方案。跨度>