将对象转换为对象列表 Javascript

Posted 2023-03-07

【中文标题】将对象转换为对象列表 Javascript

【英文标题】：Convert Objects to List of Objects Javascript

【发布时间】：2021-10-01 17:13:06

【问题描述】：

我正在构建一个 API 来将电影添加到愿望清单。我有一个端点来获取愿望清单中的所有电影。我的方法是获取电影 ID（不是来自 mongodb）并向另一个 API 发出 API 请求以获取电影对象。

到目前为止这是成功的，但现在的问题是我将两个对象融合到一个对象中，如下所示：

   id: 7,
   url: 'https://www.tvmaze.com/shows/7/homeland',
   name: 'Homeland',
   language: 'English',
   genres: [ 'Drama', 'Thriller', 'Espionage' ],  
   status: 'Ended',
   runtime: 60,
   averageRuntime: 60,
   premiered: '2011-10-02',
   officialSite: 'http://www.sho.com/sho/homeland/home',
   schedule:  time: '21:00', days: [ 'Sunday' ] ,
   rating:  average: 8.2 ,
   image: 
      medium: 'https://static.tvmaze.com/uploads/images/medium_portrait/230/575652.jpg',
      original: 'https://static.tvmaze.com/uploads/images/original_untouched/230/575652.jpg'
   ,
  summary: '<p>The winner of 6 Emmy Awards including Outstanding Drama Series, <b>Homeland</b> is an edge-of-your-seat sensation. Marine Sergeant Nicholas Brody is both a decorated hero and a serious threat. CIA officer Carrie Mathison is tops in her field despite being bipolar. The delicate dance these two complex characters perform, built on lies, suspicion, and desire, is at the heart of this gripping, emotional thriller in which nothing short of the fate of our nation is at stake.</p>',

这是下面的第二个对象。注意没有逗号分隔两个对象

  id: 1,
  url: 'https://www.tvmaze.com/shows/1/under-the-dome',
  name: 'Under the Dome',
  language: 'English',
  genres: [ 'Drama', 'Science-Fiction', 'Thriller' ],
  status: 'Ended',
  runtime: 60,
  averageRuntime: 60,
  premiered: '2013-06-24',
  schedule:  time: '22:00', days: [ 'Thursday' ] ,
  rating:  average: 6.6 ,
  image: 
     medium: 'https://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg',
     original: 'https://static.tvmaze.com/uploads/images/original_untouched/81/202627.jpg'
  ,
  summary: "<p><b>Under the Dome</b> is the story of a small town that is suddenly and inexplicably sealed off from the rest of the world by an enormous transparent dome. The town's inhabitants must deal with surviving the post-apocalyptic conditions while searching for answers about the dome, where it came from and if and when it will go away.</p>",

我现在的问题是如何将两个对象都转换为数组并作为我自己的 API 的响应发送。 API代码如下：

module.exports = 
fetchAll: async (req, res, next) => 
  
    var idsArr = [];
    var showsArr;
    var shows;
   
    try 
        let wishlist = await Wishlist.find();
        if (wishlist == null) 
            res.status(404)
                .json(
                    success: false,
                    msg: 'No Movies Found in Wishlist',
                    wishlist: []
                )
        
        // console.log(wishlist);
        wishlist.map((item) => 
            idsArr.push(item.id);
        )
        console.log(idsArr);
        idsArr.map(async (id) => 
            shows = await axios.get(`https://api.tvmaze.com/shows/$id`);
            console.log(shows.data);
            // console.log(showsArr);
            // showsArr = [shows.data];
        )
        console.log(showsArr);
        return res.status(200)
                  .json(
                    success: true,
                    msg: 'All Movies in Wishlist Fetched',
                    wishlist: showsArr
                  )
     catch (err) 
        console.log(err);
        next(err);
    
,
... // other methods

我尝试过创建一个空数组。 shows.data 这是实际响应，然后我尝试使用 showsArr.push(shows.data) 将其添加到我的数组中，但没有取得太大成功。当我登录到控制台时，我得到undefined。

Here the ids range from 1 to 240+, in case one wants to try out the endpoint - https://api.tvmaze.com/shows/$id

我将如何实现这一目标？谢谢。

【问题讨论】：

你在变量“shows”中有什么，你能举个例子吗？每次交互后，使用一个变量来存储所有节目并查看请求后的内容，例如“allShows.push(shows);” .所以，看看你在 allShows 中得到了什么

变量显示包含来自 api 调用的响应数据。你能分享一下你的意思吗？

【参考方案1】：

就像将wishlist 数组转换为id 数组一样，您需要将push 数据项转换为新的showsArr。

但是，这实际上不起作用，因为它是异步的 - 您还需要等待它们，在一系列承诺上使用 Promise.all。而且您实际上根本不应该将push 与map、a map call already creates an array containing the callback return values 一起使用。所以你可以将代码简化为

module.exports = 
    async fetchAll(req, res, next) 
        try 
            const wishlist = await Wishlist.find();
            if (wishlist == null) 
                res.status(404)
                    .json(
                        success: false,
                        msg: 'No Movies Found in Wishlist',
                        wishlist: []
                    )
            
            const idsArr = wishlist.map((item) => 
//          ^^^^^^^^^^^^^^
                return item.id;
//              ^^^^^^
            );
            console.log(idsArr);
            const promisesArr = idsArr.map(async (id) => 
                const show = await axios.get(`https://api.tvmaze.com/shows/$id`);
                console.log(shows.data);
                return shows.data;
//              ^^^^^^^^^^^^^^^^^^
            );
            const showsArr = await Promise.all(promisesArr);
//          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            console.log(showsArr);
            return res.status(200)
                      .json(
                        success: true,
                        msg: 'All Movies in Wishlist Fetched',
                        wishlist: showsArr
                      )
         catch (err) 
            console.log(err);
            next(err);
        
    
;

【讨论】：

非常感谢先生。我需要解释一下为什么必须将 idsarr.map 分配给变量以及如何识别它是 Promise。为避免以后的错误，再次感谢您的好心先生

@Nzadibe async 函数作为回调传递给map() 返回一个承诺（对于return 值），所以map() 返回这些承诺的数组，这就是@987654335 @工作。不需要赋值给临时变量，也可以直接写await Promise.all(wishlist.map(async (item) => … ));。

我相当理解。到目前为止，我很高兴完成了这一点。非常感激。请问可以私聊吗？

@Nzadibe 任何你想问的问题都可以ask as a new question - 在这里链接，我可能会看看。

非常感谢陛下