Сгруппируйте и отформатируйте список авторов

Question

с учетом следующего javascript Объект

[
  {"name":"Albert Trucmuche","role":"Textes","licence":"CC BY-NC-ND"},
  {"name":"Nina Machin","role":"Illustrations","licence":"Tous droits réservés"},
  {"name":"Roberta Bidulle","role":"Textes","licence":"CC BY-NC-ND"}
]

Как я могу это получить?

"Albert Trucmuche et Roberta Bidulle <small>CC BY-NC-ND</small><br>Illustrations: Nina Machin"

Итак, общая идея - сначала сгруппировать авторов по средам (Тексты, Иллюстрации, et c.) затем по лицензии. Затем отформатируйте am HTML строку, которая изящно присоединяется к авторам (используя запятые и «et», если это последний автор).

Лицензия не должна появляться, если это «Tous droits réservés».

Я открыт для других структур HTML + CSS, если это облегчает задачу.

Спасибо

Answer 1

Вы должны сначала отформатировать данные

const members = [
  {"name":"Albert Trucmuche","role":"Textes","licence":"CC BY-NC-ND"},
  {"name":"Nina Machin","role":"Illustrations","licence":"Tous droits réservés"},
  {"name":"Roberta Bidulle","role":"Textes","licence":"CC BY-NC-ND"}
];
// Get all the roles from members
// Use Set to remove duplicate data and convert Set to Array again
// result = [ "Textes", "Illustrations" ]
const roles = Array.from(new Set(members.map(d => d.role)));

// Mapping roles and filter all licenses from members based on selected role
// result =
// [
//     { "role": "Textes", "licenses": [ "CC BY-NC-ND" ] },
//     { "role": "Illustrations", "licenses": [ "Tous droits réservés" ] }
// ]
const rolesWithLicenses = roles.map(role => {
    return {
        "role": role,
        "licenses": Array.from(new Set(members.filter(d => d.role === role ).map(d => d.licence)))
    };
});

// Mapping rolesWithLicenses and filter all members based on selected role and license
// result =
// [
//     {
//         "role":"Textes",
//         "licenses":
//         [
//             {
//                 "license":"CC BY-NC-ND",
//                 "members":["Albert Trucmuche","Roberta Bidulle"]
//             }
//         ]
//     },
//     {
//         "role":"Illustrations",
//         "licenses":
//         [
//             {
//                 "license":"Tous droits réservés",
//                 "members":["Nina Machin"]
//             }
//         ]
//     }
// ]
const res = rolesWithLicenses.map(role => {
    const licensesWithMembers = role.licenses.map(license => {
        return {
            "license": license,
            "members":  members.filter(member => member.licence === license && member.role === role.role).map(data => data.name)
        };
    });
    role['licenses'] = licensesWithMembers;
    return role;
});

Теперь вы можете свободно рендерить данные в вашем формате, используя map