My current code successfully outputs data from a JSON file, but I'm looking to enhance it by organizing the output based on the "Role Name". For example, individuals with the role of Associate Editor should have their information displayed in one section, while those with the role of Editor and Chief are placed in another. Similarly, members of the Editorial Advisory Board should be grouped together. Below is my HTML structure, followed by the JavaScript code. To begin, I have included some sample JSON data.
Example Json Data:
[
{
"Journal: Journal Name": "Accounts of Chemical Research",
"Role Name": "Editorial Advisory Board",
"Gender": "Female",
"Full Name": "Joanna Aizenberg",
...
},
{
"Journal: Journal Name": "Accounts of Chemical Research",
"Role Name": "Editorial Advisory Board",
"Gender": "Male",
"Full Name": "Ayyappanpillai Ajayaghosh",
...
},
{
...
}
]
<html>
...
</head>
HTML Structure:
<body>
...
Javascript Code:
$(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 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>");
}
}