Понятия не имею, ищите ли вы это.
В этом примере кода предполагается, что вы уже сделали вызовы для получения результатов API1 и API2.
Затем,чтобы упростить вещи, я конвертирую пользовательский массив в пользовательский объект.Ключи объекта являются идентификатором пользователя, а значения объекта являются исходными значениями.
Это позволяет вам быстрее находить пользователя в теме:
let user = userList[topic.userId];
Затем у меня есть цикл, который преобразует Массив тем из структуры объекта в Массив строк.Затем они объединяются в одну строку с '\n', разделяющими их.
Затем эта строка вставляется в div, который должен содержать сгенерированный HTML.
// Assume that this data came from the first API call
let api1Resp = [
{
"userId": 1,
"id": 10,
"title": "Something Cool",
"body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"userId": 2,
"id": 11,
"title": "Something else",
"body": "Excepteur veniam deserunt eu fugiat occaecat voluptate Lorem fugiat officia proident laboris pariatur minim laboris qui. Reprehenderit veniam eu duis anim incididunt adipisicing dolor officia. Ad et magna sint sit sint nisi officia labore do deserunt ut velit quis tempor do nulla adipisicing. Sit aliqua incididunt fugiat aute ex mollit ea aliquip et magna ut id deserunt ut. Dolore ullamco qui sunt Lorem cillum aliquip exercitation. Irure cillum laboris sit eu tempor dolore proident consectetur irure laboris eiusmod reprehenderit."
},
{
"userId": 2,
"id": 12,
"title": "Hot Stuff",
"body": "Ullamco minim aute laboris enim veniam ex et. Do Lorem laborum veniam labore incididunt occaecat eiusmod et occaecat eiusmod non sunt non non. Ad eiusmod ipsum ex velit cupidatat consequat anim consectetur dolore ea veniam.\n"+
"\n"+
"Consequat commodo culpa ipsum mollit voluptate do in adipisicing ea quis id est duis labore aliqua nisi tempor. Reprehenderit reprehenderit veniam nostrud excepteur aliquip ut sit tempor consectetur excepteur. Minim fugiat aliqua laboris aliqua nostrud id ex proident. Dolore amet occaecat dolor deserunt tempor irure labore veniam ad culpa mollit ex irure laborum anim cillum laborum. Est sunt nisi anim quis elit anim in. Velit qui reprehenderit laboris et est adipisicing quis esse ullamco nisi anim. Voluptate velit commodo ex laboris consequat dolor culpa consequat cupidatat occaecat ullamco fugiat aliqua minim voluptate commodo proident. Aliquip laboris ad sint consequat eiusmod minim velit velit id.\n"+
"\n"+
"Culpa Lorem laboris elit non fugiat aute et labore exercitation et in sunt ullamco tempor irure non quis. Laborum nulla nostrud labore incididunt ipsum Lorem ut aliquip velit deserunt sunt exercitation aliqua irure proident laboris. Quis et velit anim in id enim culpa id. Ex consequat labore adipisicing sunt non in proident cupidatat esse officia nostrud. Pariatur dolor officia culpa deserunt aliqua id exercitation duis magna sunt in elit officia. Aliquip nulla veniam consectetur ut sit labore officia sit reprehenderit.\n"+
"\n"+
"Et est esse adipisicing veniam sint laborum Lorem elit. Culpa ad anim irure ut dolore fugiat dolor ullamco ea culpa aliqua eiusmod nulla. Adipisicing dolore incididunt non velit laborum mollit sit nulla. Nisi quis pariatur excepteur ullamco id eu laborum anim esse. Ut elit nisi exercitation anim elit consectetur velit officia laboris quis et. Occaecat consequat duis duis tempor ullamco dolor anim tempor non occaecat occaecat irure dolore."
},
{
"userId": 2,
"id": 13,
"title": "This is a longer title",
"body": "Excepteur veniam deserunt eu fugiat occaecat voluptate Lorem fugiat officia proident laboris pariatur minim laboris qui. Reprehenderit veniam eu duis anim incididunt adipisicing dolor officia. Ad et magna sint sit sint nisi officia labore do deserunt ut velit quis tempor do nulla adipisicing. Sit aliqua incididunt fugiat aute ex mollit ea aliquip et magna ut id deserunt ut. Dolore ullamco qui sunt Lorem cillum aliquip exercitation. Irure cillum laboris sit eu tempor dolore proident consectetur irure laboris eiusmod reprehenderit."
}
];
// Assume that this data came from the second API call
let api2Resp = [
{
"id": 1,
"name": "Lera",
"username": "Lera2",
"email": "Em@.com",
"address": {
"street": "GGa",
"suite": "Ap3. 333",
"city": "Gwee",
"zipcode": "2222-3333",
"geo": {
"lat": "-11213",
"lng": "312424"
}
}
},
{
"id": 2,
"name": "John",
"username": "Big John",
"email": "bj@littlefoot.com",
"address": {
"street": "123 Street",
"suite": "",
"city": "Smallville",
"zipcode": "12345-6789",
"geo": {
"lat": "-11213",
"lng": "312424"
}
}
}
];
// Convert from an array to an object with the user id as the key and the user info object and the value.
// This allows for simpler data access.
let userList = api2Resp.reduce(
(newUserList, user) => {
newUserList[user.id] = user;
return newUserList;
}, {}
);
// Generate all of the output
let html = api1Resp.map(
topic => {
// Try to get the user info from the topic
let user = userList[topic.userId];
// If user is undefined the it is not in the list
return `
<div class="topic" id="topic:${topic.id}">
<h2>${topic.title}</h2>
<div class="author">By: <a href="mailto:${user.email}">${user.username}</a></div>
<div class="body">${topic.body.replace(/\n/g, '<br/>\n')}</div>
</div>`;
}
).join('\n');
let el = document.getElementById('output');
el.innerHTML = html;
<div id="output"></div>