title: Get google fonts with validation
body: <p>I use axios to get the google fonts and to be honest I got stuck in my own code. I need a little help to solve this situation.</p>
  
  <p>So when I get the fonts I want to get them in an array, each one in a json. An example:</p>
  
  <pre><code>0:
  category: "serif"
  family: "Abhaya Libre"
  files: {500: "http://fonts.gstatic.com/s/abhayalibre/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) ["regular", "500", "600", "700", "800"]
  version: "v4"
  __proto__: Object
  1:
  category: "sans-serif"
  family: "Advent Pro"
  files: {100: "http://fonts.gstatic.com/s/adventpro/v9/V8mCoQfxVT4Dvddr_yOwjVmtLZxcBtItFw.ttf", 200: "http://fonts.gstatic.com/s/adventpro/v9/V8mDoQfxVT4Dvddr_yOwjfWMDbZyCts0DqQ.ttf", 300: "http://fonts.gstatic.com/s/adventpro/v9/V8mDoQfxVT4Dvddr_yOwjZGPDbZyCts0DqQ.ttf", 500: "http://fonts.gstatic.com/s/adventpro/v9/V8mDoQfxVT4Dvddr_yOwjcmODbZyCts0DqQ.ttf", 600: "http://fonts.gstatic.com/s/adventpro/v9/V8mDoQfxVT4Dvddr_yOwjeWJDbZyCts0DqQ.ttf", 700: "http://fonts.gstatic.com/s/adventpro/v9/V8mDoQfxVT4Dvddr_yOwjYGIDbZyCts0DqQ.ttf", regular: "http://fonts.gstatic.com/s/adventpro/v9/V8mAoQfxVT4Dvddr_yOwtT2nKb5ZFtI.ttf"}
  kind: "webfonts#webfont"
  lastModified: "2019-01-15"
  subsets: (3) ["latin-ext", "latin", "greek"]
  variants: (7) ["100", "200", "300", "regular", "500", "600", "700"]
  version: "v9"
  __proto__: Object
  </code></pre>
  
  <p>My code is:</p>
  
  <pre><code>axios.get(`https://www.googleapis.com/webfonts/v1/webfonts?sort=alpha&amp;key=${GOOGLE_API_KEY}`)
    .then(({ data }) =&gt; {
      const googleFonts = _filter(data.items, (item) =&gt; item.variants.length &gt;= 3);
      const filterVariants = _map(googleFonts, (variantsArray) =&gt; {
        const removeItalicVariants = _filter(variantsArray.variants, (variant) =&gt; {
          return variant !== 'italic' &amp;&amp; variant.indexOf('italic') === -1;
        });
        return removeItalicVariants;
      });
  
      let getVariantsWithValidation = null;
      if (filterVariants.length &gt; 0) {
        getVariantsWithValidation = _filter(filterVariants, (variants) =&gt; {
          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 googleFonts &amp;&amp; (lightWeight.length &gt;= 1 &amp;&amp; regularWeight.length &gt;= 1 &amp;&amp; boldWeight.length &gt;= 1);
        });
      }
      this.setState({
        googleFonts,
        loading: false,
      });
    })
    .catch((err) =&gt; {
      if (!axios.isCancel(err)) {
        this.setState({ error: registerError(err.message), loading: false });
      }
    });
  </code></pre>
  
  <p>So I have to return the googleFonts in the end to setState() with some conditions. </p>
  
  <p>First conditions are that the font, that is returned in the end, should not have in variants any value named "italic" or "'number'italic" where number could be any number 100 to 900.</p>
  
  <p>This happens in filter variants, that has the output:</p>
  
  <pre><code>0: (5) ["regular", "500", "600", "700", "800"]
  1: (7) ["100", "200", "300", "regular", "500", "600", "700"]
  2: (5) ["regular", "500", "700", "800", "900"]
  3: (5) ["regular", "500", "700", "800", "900"]
  4: (7) ["100", "300", "regular", "500", "700", "800", "900"]
  5: (7) ["100", "300", "regular", "500", "700", "800", "900"]
  6: (3) ["300", "regular", "700"]
  </code></pre>
  
  <p>Second type of conditions are that the <code>variants</code> array has to contain <code>regular</code> 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.</p>
  
  <p>This happens in getVariantsWithValidation:</p>
  
  <pre><code>0: (7) ["100", "200", "300", "regular", "500", "600", "700"]
  1: (7) ["100", "300", "regular", "500", "700", "800", "900"]
  2: (7) ["100", "300", "regular", "500", "700", "800", "900"]
  3: (3) ["300", "regular", "700"]
  4: (8) ["100", "200", "300", "regular", "500", "700", "800", "900"]
  5: (6) ["200", "300", "regular", "600", "700", "800"]
  6: (6) ["200", "300", "regular", "500", "600", "700"]
  7: (5) ["300", "regular", "500", "600", "700"]
  8: (3) ["300", "regular", "700"]
  </code></pre>
  
  <p>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.</p>
  
  <p>So I have to return the only fonts, the json for each one, that respect the conditions from above, in this format:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>of course all objects, being in an array.</p>
  
  <p>Can someone please give me a hand how to solve this?</p>