JavaScript-从多个数组填充对象构造函数

托比亚斯

我正在从一个重复其页面上的元素的网站上收集多个innerText-Properties(24个大学资料,包括名称,平均评分,程序数量等)。

我在一家大学测试了我的小程序,使用它querySelector()来收集我想要的4-5内文本,var u = await Promise.allSettled([arr1, arr2, arr3, arr4, arr5])并使用它们并使用了我在顶部定义的构造函数var currUniv = new University(...myArrayOfFacts)到目前为止一切都很好(至少是结果...)

由于该页面一次/在一页上提供了24个大学主题(并且都具有相同的结构),因此我现在想一次querySelectorAll()抓取5个数组,每个数组包含24个元素。如果我坚持下去,var u = await Promise.allSettled([arr1, arr2, arr3, arr4, arr5])我最终会得到一个由5个数组组成的数组,现在不知道(而且似乎无法找到一种成功的Google方法)如何将每个数组的一个元素一次提供给构造函数。

我是否应该首先避免将所有内容塞进一个大数组中?之所以这样做,是因为我认为我需要等待所有Promises才能解决...或者应该从什么时候开始遍历数组?

一切都是异步的。我将代码缩短了一点:就像我进一步写的那样-对于一组DOM元素/对于一所大学来说,这很好用。

非常感谢您为我指明正确方向的任何提示!

const puppeteer = require('./node_modules/puppeteer');

const startUrl = "https://www.studycheck.de/hochschulen/";

//constructor - shortend
function HSMain(name, ...){
      this.nameHS = name;
      this...
}

const hsfPageVisits = async () => {

  try{
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();
    await page.goto(startUrl, {waitUntil: 'domcontentloaded'});

   // get first element (name)
      var nameHS = await page.evaluate(() => {
        let name = Array.from(document.querySelectorAll('div .title a')).map(node => node.innerText);
        return name;
      });
   // get second element (rating)
      var rating = await page.evaluate(() => {
        let rate = Array.from(document.querySelectorAll('div .rating-container > div .rating-value')).map(node => node.innerText.trim());
      return rate;
      });
[...more DOM - elements...]

// wait for all promises to resolve
var univArr = await Promise.allSettled([nameHS, rating, ..., ..., ...]);

// spread the array into the object constructor
var myObj = await new HSMain(...univArr);

  await browser.close();
  }
  catch(e){
    console.log("error", e);
  }
};
hsfPageVisits();
易卜拉欣·马尔里尔

因此,您所拥有的是一系列名称,另一个用于评级等等。这些数组的每个索引都对应于同一大学,因此只有map这些数组之一,并且使用提供的索引map来从其余数组中获取值,不幸的是,您不能在此处使用传播语法:

let universities = nameHS.map((name, i) =>
    new University(name, rating[i], theNextArray[i], theArrayAfterThat[i], ...)
);

我的方法是为每所大学一次获得所有“事实”,而不是分别按不同的阵列。每所大学都会将其事实分组在一个对象或数组中,这将大大缩短代码,如下所示:

try {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto(startUrl, { waitUntil: 'domcontentloaded' });

    var universitiesFacts = await page.evaluate(() => {
        let universities = Array.from(document.querySelectorAll(".institute-item")); // first get all university (each university info is contained in an element with a class 'institute-item')
        
        return universities.map(university => [                                      // for each .institute-item element
            university.querySelector(".title a").textContent.trim(),                 // get the name (using querySelector on the .institute-item element)
            university.querySelector(".rating-value").textContent.trim(),            // get the rating
            // ... the rest of facts for the current university
        ]);
    });

    let universities = universitiesFacts.map(facts => new University(...facts));     // now we can use the spread syntax
  
    await browser.close();
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Javascript:如何从多个数组和变量构造对象?

来自分类Dev

将多个数组放入JavaScript对象

来自分类Dev

JavaScript - 从多个数组创建对象

来自分类Dev

对象数组包含“ JAVASCRIPT”中元素的多个数组

来自分类Dev

如何从Javascript中的对象属性连接多个数组?

来自分类Dev

Javascript在数组中存储多个数据对象

来自分类Dev

将嵌套的Javascript对象属性推入多个数组

来自分类Dev

使用JavaScript将多个数组迭代到对象中

来自分类Dev

Javascript在数组中存储多个数据对象

来自分类Dev

带数组或子对象的Javascript OOP构造函数?

来自分类Dev

带数组或子对象的Javascript OOP构造函数?

来自分类Dev

带对象的JavaScript构造函数

来自分类Dev

Javascript:创建对象构造函数

来自分类Dev

Javascript构造函数-使用对象?

来自分类Dev

Javascript原型对象构造函数

来自分类Dev

匿名对象的javascript构造函数

来自分类Dev

Javascript构造函数-使用对象?

来自分类Dev

在JavaScript中用数组填充对象

来自分类Dev

对象构造函数作为Javascript中的函数

来自分类Dev

对象,如函数,JavaScript中的构造函数

来自分类Dev

对象构造函数作为Javascript中的函数

来自分类Dev

如何基于Javascript中的多个数组属性对对象数组进行分组

来自分类Dev

Javascript如何使用高阶函数和Map / Reduce函数求和多个数组

来自分类Dev

Javascript / AngularJs-如何用另一个数组中的对象填充数组?

来自分类Dev

使用来自多个数组的值过滤 JavaScript 对象

来自分类Dev

如何用JavaScript创建对象构造函数;

来自分类Dev

推荐的Javascript对象构造函数是什么?

来自分类Dev

JavaScript对象构造函数返回属性

来自分类Dev

对象不是构造函数JavaScript错误

Related 相关文章

  1. 1

    Javascript:如何从多个数组和变量构造对象?

  2. 2

    将多个数组放入JavaScript对象

  3. 3

    JavaScript - 从多个数组创建对象

  4. 4

    对象数组包含“ JAVASCRIPT”中元素的多个数组

  5. 5

    如何从Javascript中的对象属性连接多个数组?

  6. 6

    Javascript在数组中存储多个数据对象

  7. 7

    将嵌套的Javascript对象属性推入多个数组

  8. 8

    使用JavaScript将多个数组迭代到对象中

  9. 9

    Javascript在数组中存储多个数据对象

  10. 10

    带数组或子对象的Javascript OOP构造函数?

  11. 11

    带数组或子对象的Javascript OOP构造函数?

  12. 12

    带对象的JavaScript构造函数

  13. 13

    Javascript:创建对象构造函数

  14. 14

    Javascript构造函数-使用对象?

  15. 15

    Javascript原型对象构造函数

  16. 16

    匿名对象的javascript构造函数

  17. 17

    Javascript构造函数-使用对象?

  18. 18

    在JavaScript中用数组填充对象

  19. 19

    对象构造函数作为Javascript中的函数

  20. 20

    对象,如函数,JavaScript中的构造函数

  21. 21

    对象构造函数作为Javascript中的函数

  22. 22

    如何基于Javascript中的多个数组属性对对象数组进行分组

  23. 23

    Javascript如何使用高阶函数和Map / Reduce函数求和多个数组

  24. 24

    Javascript / AngularJs-如何用另一个数组中的对象填充数组?

  25. 25

    使用来自多个数组的值过滤 JavaScript 对象

  26. 26

    如何用JavaScript创建对象构造函数;

  27. 27

    推荐的Javascript对象构造函数是什么?

  28. 28

    JavaScript对象构造函数返回属性

  29. 29

    对象不是构造函数JavaScript错误

热门标签

归档