How to create an array of objects for each new value that is passed from other component?

I’ve been working on scraping some data from web pages. Now I wanted to keep components separated in order to keep my code readable and organized.

Now I’ve created a component which scrapes data from all pages that I need, and I’m passing that html data to another component where I want to create an array of objects to keep my records and later insert them into DB.

Here is how my component, where I scrape data, looks like:

const cheerio = require('cheerio');
const axios = require('axios');
const parsing = require('./parseData');

exports.olxScraper = () => {
  const url =
    'https://www.olx.ba/pretraga?vrsta=samoprodaja&kategorija=23&sort_order=desc&kanton=9&sacijenom=sacijenom&stranica=1';

  const getRawData = async () => {
    try {
      await axios.get(url).then((res) => {
        const $ = cheerio.load(res.data);
        $('div[id="rezultatipretrage"] > div')
          .not('div[class="listitem artikal obicniArtikal  i index"]')
          .not('div[class="obicniArtikal"]')
          .each((index, element) => {
            $('span[class="prekrizenacijena"]').remove();
            const getLink = $(element)
              .find('div[class="naslov"] > a')
              .attr('href');
            const getDescription = $(element)
              .find('div[class="naslov"] > a > p')
              .text();
            const getPrice = $(element)
              .find('div[class="datum"] > span')
              .text()
              .replace(/\.| ?KM$/g, '')
              .replace(' ', '');
            const getPicture = $(element)
              .find('div[class="slika"] > img')
              .attr('src');

            parsing.parseData(getLink, getDescription, getPrice, getPicture);
          });
      });
    } catch (error) {
      console.log(error);
    }
  };
  getRawData();
};

exports.santScraper = () => {
  const url = `https://www.sant.ba/pretraga/prodaja-1/tip-2/cijena_min-20000/stranica-1`;

  const getRawData = async () => {
    try {
      await axios.get(url).then((response) => {
        const $ = cheerio.load(response.data);

        $('div[class="col-xxs-12 col-xss-6 col-xs-6 col-sm-6 col-lg-4"]').each(
          (index, element) => {
            const getLink = $(element).find('a[class="re-image"]').attr('href');
            const getDescription = $(element).find('a[class="title"]').text();
            const getPrice = $(element)
              .find('div[class="prices"] > h3[class="price"]')
              .text()
              .replace(/\.| ?KM$/g, '')
              .replace(',', '.');
            const getPicture = $(element).find('img').attr('data-original');
            
            parsing.parseData(getLink, getDescription, getPrice, getPicture);
          }
        );
      });
    } catch (error) {
      console.log(console.log(error));
    }
  };
  getRawData();
};

this.olxScraper();
this.santScraper();

Now in the parseData component I’ve created this:

exports.parseData = (getLink, getDescription, getPrice, getPicture) => {
  const apartments = [];

  apartments = {
    link: getLink,
    description: getDescription,
    price: getPrice,
    picture: getPicture,
  };
};

Now console.log of these variables return me a data, which is good. Only thing now is I don’t know how to foreach eg. price, push these all variables into one object, then for second price second object, etc.

So, what would be the solution to this? I cannot .count() or .length as these variables will return a number of characters in the string alone.

Here is example of console.log(getPrice) inside parseData component

199000.00
360000.00
150000.00
538090.37
478817.70
533772.19
376923.46
150000.00
290640.00
89500
85000
153000
619000
300000
75284
162776
387000
102000
64500
139000
195000
97000
175000
142000
218000
etc..

I would handle this easy inside component where I’m getting raw data, just adding [i] when creating an object, but how to handle this when I’m sending it to another component and wanting to create an array of objects with it? I was thinking of creating some counter eg. for getLink which will count the number of links that are passed into the component and just add that parameter when creating objects.

So my desired output would be:

[
   {
     link: getLink1,
     description: getDescription1,
     price: getPrice1,
     picture: getPicture1
   },
   {
     link: getLink2,
     description: getDescription2,
     price: getPrice2,
     picture: getPicture2
   },
   etc...
]

88 thoughts on “How to create an array of objects for each new value that is passed from other component?”

Leave a Comment