使用节点、js 和 axios 从不同来源填充 DataTable

Question

我需要用来自不同来源的数据填充数据表。我正在使用一个简单的快速服务器从 2 个不同的 api（使用 axios 和 jsonplaceholder）获取数据。当我在我的服务器中获取数据时，我将它发送到前端并在我的 table 中呈现它。对于每个 table 行，我希望其中的一些列填充来自 source1 的数据，其余列填充来自 source 2 的数据。我在计算最后一步时遇到问题。

这是我的代码的相关部分：

// test route
app.get('/admin', async (req, res) => {
  // get data from jsonplaceholder
  let [usersApi, postsApi] =  await Promise.all([
    axios.get('https://jsonplaceholder.typicode.com/users'),
    axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10') 
  ]);
   // check if data is fetched
  console.log('post + users', usersApi.data, postsApi.data);
  // send data to view
  res.render('pages/admin', { apiResponse: [usersApi.data, postsApi.data] });
});

现在，在视图中我传递数据并尝试渲染它，就像这样

<tbody>
     <% apiResponse.forEach((data) => { %>
         <% data.forEach((data) => { %>
             <tr>
                 <td><%= data.name %></td>
                 <td><%= data.username %></td>
                 <td><%= data.email %></td>
                 <td><%= data.phone %></td>
                 <td><%= data.website %></td>
                 <td><%= data.title %></td>
                 <td><%= data.body %></td>
                 </tr>
         <% }); %>
     <% }); %>
</tbody>

table 已填充但未按预期填充，即每一行都已填满

table

我已经尝试了一些变体，但我似乎无法弄清楚。希望有人能帮帮我

Answer 1

您似乎在尝试 link 用户访问 post。你将不得不编写一些逻辑来实现这个

检索用户和 post 后。循环遍历 post，然后使用 find() 方法找到 post 的用户。

app.get('/admin', async (req, res) => {
  // get data from jsonplaceholder
  let [userData, postData] =  await Promise.all([
    axios.get('https://jsonplaceholder.typicode.com/users'),
    axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10') 
  ]);

  const users = userData.data;
  const posts = postData.data;

  posts.forEach((post) => {
    post.user = users.find((user) => { return post.userId == user.id })
  })
 
   // check if data is fetched

  console.log('post + users', usersApi.data, postsApi.data);
  // send data to view
  res.render('pages/admin', { apiResponse: posts });
});

并且视图将更改为此以匹配新数据集

<tbody>
   <% apiResponse.forEach((post) => { %>
      
       <tr>
           <td><%= post.user.name %></td>
           <td><%= post.user.username %></td>
           <td><%= post.user.email %></td>
           <td><%= post.user.phone %></td>
           <td><%= post.user.website %></td>
           <td><%= post.title %></td>
           <td><%= post.body %></td>
        </tr>
      
   <% }); %>
</tbody>

使用节点、js 和 axios 从不同来源填充 DataTable

Populate DataTable from different sources using nodejs, ejs and axios

datatables

ejs

node.js

axios