Magic AliExpress

GRATIS CON POSSIBILITÀ DI UPGRADE
Da Gautruche | Aggiornamento 10 mesi fa | eCommerce
Popolarità

9.7 / 10

Latenza

9,375ms

Livello di servizio

100%

Torna a tutti i tutorial (3)

Display the categories as tree arborescence in Javascript

Preface

This tutorial aims to help you to display the categories as a tree.
Today the service API/categories return a flat tree.
For information, the service manages three types of categories :

  • API (Managed by this API, the ID are different between Aliexpress and this API)

  • WEBSITE (Scrapped from Aliexpress website).

  • HYBRID (Category compatible with Website and API )

If you want more granularity, I propose you to create a tree with the HYBRID and API provider in Javascript.

1. Install unirest

In your package.json, add the following line.
"unirest": "^0.6.0",

2. Retrieve the categories from RAPID API

The aim is to realize the communication between your code and the RAPID API service. To do that, you can add this method inside the category service file in your backend

getCategories(): any {
    return new Promise((resolve, reject) => {
      var req = unirest(
        'GET',
        'https://magic-aliexpress1.p.rapidapi.com/api/v2/categories'
      );

      req.headers({
        'x-rapidapi-key': 'your token',
        'x-rapidapi-host': 'magic-aliexpress1.p.rapidapi.com',
        useQueryString: true,
      });

      req.end(function (res) {
        if (res.error) throw new Error(res.error);
        resolve(res.body);
      });
    });
  }

3. Filter the categories with providers HYBRID and API

Firstly, we call the method added in your category service to retrieve the categories from RAPID API, and we process them to have the categories with providers HYBRID and API

var categories: any[] = await this.categoryService.getCategories();

var categoriesFiltered = categories.filter(
        (category) =>
          category.provider == 'HYBRID' || category.provider == 'API'
      );

4. Convert the categories flatten tree to hierarchical tree. (unflatten processing )

To realize this, I propose you to add the following method to your category service and after to call him in your controller to return the result.

Unflatten processing

  unflatten(items) {
    var tree = [],
      mappedElem: any = {},
      mappedArr = {};

    // Build a hash table and map items to objects
    items.forEach(function (item) {
      var id = item.alie_category_id;
      if (!mappedArr.hasOwnProperty(id)) {
        // in case of duplicates
        mappedArr[id] = {
          id: id,
          title: item.category_name,
          metadata: item,
        }; // the extracted id as key, and the item as value
        mappedArr[id].children = []; // under each item, add a key "children" with an empty array as value
      }
    });

    // Loop over hash table
    for (var id in mappedArr) {
      if (mappedArr.hasOwnProperty(id)) {
        mappedElem = mappedArr[id];
        // If the element is not at the root level, add it to its parent array of children. Note this will continue till we have only root level elements left
        if (
          mappedElem.metadata.api_parent_id != undefined ||
          mappedElem.metadata.api_parent_id != null
        ) {
          var parentId = mappedElem.metadata.api_parent_id;
          if (mappedArr[parentId]) {
            mappedElem.parent = {
              id: parentId,
              title: mappedArr[parentId].title
            };
            mappedArr[parentId].children.push(mappedElem);
          } else {
            console.error('no parent category with ' + parentId);
          }
        }
        // If the element is at the root level, directly push to the tree
        else {
          (mappedElem.type = 'sub'), tree.push(mappedElem);
        }
      }
    }
    return tree;
  }

Call the unflatten processing from the controller.

var categoriesDTO = this.categoryService.unflatten(categoriesFiltered);
if(categoriesDTO){
return categoriesDTO
}

Valutazione: 5 - Voti: 1