Fetch from Google Api the fonts

[sorin21us]

I try to get the google fonts and to use in the application. The problem that I got into is that I don’t know how to return the google fonts, googleFonts, my variable, after I put some validations.

I put the code here to be easier to test it and write what you want.

This is my whole js code:

axios.get(`https://www.googleapis.com/webfonts/v1/webfonts?sort=alpha&key=AIzaSyDgRT5SVSOV6TpTWV1PePBjnicqnj7h4lw`)
  .then(({ data }) => {
    // get only the fonts that have variants lenghts bigger then 3
    const googleFonts = data.items.filter((item) => item.variants.length >= 3);

    // remove all "italic" words or "numberitalic" from each font variant array
    const filterVariants = googleFonts.map((variantsArray) => {
      const removeItalicVariants = variantsArray.variants.filter((variant) => {
        return variant !== 'italic' && variant.indexOf('italic') === -1;
      });
      return removeItalicVariants;
    });

    // check that each font variant array has al least 1 value for light, regular and bold weight
    let getVariantsWithValidation = null;
    if (filterVariants.length > 0) {
      getVariantsWithValidation = filterVariants.filter((variants) => {
        const regularPosition = variants.indexOf('regular');

        const lightWeight = variants ? variants.slice(0, regularPosition) : null;
        const regularWeight = variants ? variants.slice(1, variants.length - 1) : null;
        const boldWeight = variants ? variants.slice(regularPosition + 1, variants.length) : null;

        return lightWeight.length >= 1 && regularWeight.length >= 1 && boldWeight.length >= 1;
      });
    }
    console.log('googleFonts', googleFonts);
  })
  .catch((err) => {
    if (!axios.isCancel(err)) {
      console.log('Error ', err.message)
    }
  });

First validations are that the font, that is outputed in the end, in the console, googleFonts, should not have in variants any value named “italic” or “'number’italic” where number could be any number 100 to 900. This happens in filterVariants.

Second type of validations are that the variants array has to contain regular word. If I get the regular word then I have to check if before and after regular there is at least a value. These are light and bold values. This happens in getVariantsWithValidation.

Right now, how is the code, googleFonts variable will return only the all fonts, in an array with jsons, that has variants.length bigger then 3. I need to return the fonts with all conditions. All these conditions are for variants array from each font object.

So I have to return the only fonts, the json for each one, that respect the conditions from above, in the same format that I receive fonts from google api:

category: "serif"
family: "Advent Pro"
files: {500: "http://fonts.gstatic.com/s/adventpro/v4/e3t5euGtX-Co5MNzeAOqinEYj2ryqtxI6oYtBA.ttf", 600: "http://fonts.gstatic.com/s/abhayalibre/v4/e3t5euGtX-Co5MNzeAOqinEYo23yqtxI6oYtBA.ttf", 700: "http://fonts.gstatic.com/s/abhayalibre/v4/e3t5euGtX-Co5MNzeAOqinEYx2zyqtxI6oYtBA.ttf", 800: "http://fonts.gstatic.com/s/abhayalibre/v4/e3t5euGtX-Co5MNzeAOqinEY22_yqtxI6oYtBA.ttf", regular: "http://fonts.gstatic.com/s/abhayalibre/v4/e3tmeuGtX-Co5MNzeAOqinEge0PWovdU4w.ttf"}
kind: "webfonts#webfont"
lastModified: "2019-01-10"
subsets: (3) ["latin-ext", "latin", "sinhala"]
variants: (5) ["300", "400", "regular", "500", "600", "700", "800"]
version: "v4"
__proto__: Object

of course all objects, being in an array.
I tried to put both const with validation inside googleFonts filter and in the end to make a long return with all validations, but without success. Believe me or not, since yesterday I try to solve this :(.

It there anybody that can give me a hand with this?

[m3g4p0p]

@sorin21us

// remove all “italic” words or “numberitalic” from each font variant array

Hi @sorin21us, this one is a bit different from the others: you’re not filtering the fonts array, you want to transform it. So using map() is right here, just not to the variants arrays, but to copies of the original objects just with filtered variants:

const googleFonts = data.items
  .filter(item => item.variants.length >= 3)
  .map(item => {
    const filteredVariants = item.variants.filter(variant => variant.indexOf('italic') === -1)
    // Create a copy of the item (rather than modifying the original data),
    // but substitute the variants array with the filtered variants
    return { ...item, variants: filteredVariants }
  })
  .filter(item => {
    const regularPosition = item.variants.indexOf('regular')
    return regularPosition > 0 && 
      regularPosition < item.variants.length - 1
  })

[sorin21us]

Thank you very much m3g4p0p. Your version is very smooth and deep, in the same time. I like it very much . God bless you, because you take time to help others.

[m3g4p0p]

np :-)