In JavaScript, I can't make unique values of arrays of strings, and exclude determinated values from another array

Question

Only two problems:

I can't make unique values of arrays of strings in iterations and control flow. In my test, the iterations and control flow duplicated the values 18 times, and I tried to change a lot of codes in different way, but unsuccessfully.
I learned from How can I remove a specific item from an array?, but my case is different, because two associative folders are different. I will explain:

  let titles = ["Adwaita++", "Suru++", "Yaru++"];
  let styles = ["adwaita", "suru", "yaru"];
  let categories = ["documents", "git", "github", "gitlab", "mac", "pictures", "musics", "script", "templates", "videos"];
  let colours = ["60spsychodelic", "90ssummer", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion", "yellow"];

Adwaita++, Suru++ and Yaru++ are names of icons themes, styles are themes of icons, and colours are folders colours. Almost all icons themes have all categories (the same number), and the same number of colours, but Adwaita++ does not have folder colours, for example, 60spsychodelic and 90ssummer, which are exclusive of Suru++. Suru++ also does not have certain folders colours, for example, canonical and vermillion. Then I want to exclude or remove the values.

You can see that the arrays of strings titles or styles and colours are totally different.

So I built iterations and three control flows:

 for (let a = 0; a < titles.length; a++)
  {
    const tt = titles[a];

      for (let i = 0; i < styles.length; i++) 
      {
        const style = styles[i];

        if (style == "adwaita") 
        {
          html+= '<h1>' + titles[0] + '</h1>';
          for (let j = 0; j < categories.length; j++) 
          {
            const category = categories[j];
            
            for (let k = 0; k < colours.length; k++) 
            {
              const colour = colours[k];

              html+= "<p><code>"+styles[0]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
            }
          }  
        }

        else if (style == "suru") 
        {
          html+= '<h1>' + titles[1] + '</h1>';
          for (let j = 0; j < categories.length; j++) 
          {
            const category = categories[j];
            
            for (let k = 0; k < colours.length; k++) 
            {
              const colour = colours[k]
              
              html+= "<p><code>"+styles[1]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
            }
          }  
        }

        else
        {
          html+= '<h1>' + titles[2] + '</h1>';
          for (let j = 0; j < categories.length; j++) 
          {
            const category = categories[j];
            
            for (let k = 0; k < colours.length; k++) 
            {
              const colour = colours[k];

              html+= "<p><code>"+styles[2]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
            }
          }  
        }
    }
  }

  document.write(html);

Now, let's go to:

else if (style == "suru") 
{
  html+= '<h1>' + titles[1] + '</h1>';
  for (let j = 0; j < categories.length; j++) 
  {
    const category = categories[j];
    
    for (let k = 0; k < colours.length; k++) 
    {
      const colour = colours[k]
      
      html+= "<p><code>"+styles[1]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
    }
  }  
}

In this iteration colour, I tried to write the codes, that I got from How can I remove a specific item from an array?, that would remove the colours that do not exist in Suru++.

Well, I thought of:

let colours = ["60spsychodelic=[suru]", "90ssummer=suru]", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion=[yaru]", "yellow"];

It must be good, but Adwaita++ also needs vermillion, and if I remove [yaru], it will end up being included in Suru++, what is not good.

Only these two problems I can not fix. Although I prefer a dummy and simple code, you are free to write a condensed version only if you want.

You can check and will understand: https://github.com/gusbemacbe/suru-plus-folders/blob/master/languages/en.md

Here is the ready snnipet for you to test for discovering why it duplicated 18 times the group of values.

var html = '';
let titles = ["Adwaita++", "Suru++", "Yaru++"];
let styles = ["adwaita", "suru", "yaru"];
let categories = ["documents", "git", "github", "gitlab", "mac", "pictures", "musics", "script", "templates", "videos"];
let colours = ["60spsychodelic", "90ssummer", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion", "yellow"];

for (let a = 0; a < titles.length; a++) {
  const tt = titles[a];

  for (let i = 0; i < styles.length; i++) {
    const style = styles[i];

    if (style == "adwaita") {
      html += '<h1>' + titles[0] + '</h1>';
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];

          html += "<p><code>" + styles[0] + "-plus/folder-" + category + "-" + colour + ".svg</code></p>";
        }
      }
    } else if (style == "suru") {
      html += '<h1>' + titles[1] + '</h1>';
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];
          html += "<p><code>" + styles[1] + "-plus/folder-" + category + "-" + colour + ".svg</code></p>";
        }
      }
    } else {
      html += '<h1>' + titles[2] + '</h1>';
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];

          html += "<p><code>" + styles[2] + "-plus/folder-" + category + "-" + colour + ".svg</code></p>";
        }
      }
    }
  }
}

document.write(html);

JavaScript doesn't have associative arrays. Objects are similar, but you're not using them anywhere in your code. — Barmar, Aug 11 '20 at 23:11
@Barmar, ah, how do you call these arrays? I will correct my question. — Gustavo Reis, Aug 11 '20 at 23:14

Carlos1232 · Accepted Answer · 2020-08-12T00:31:59.890

for solving this problem we should use Set(),Set; But also we have to convert our Set to a normal array in order to use the join property for showing the html.

var html = '';
let titles = ["Adwaita++", "Suru++", "Yaru++"];
let styles = ["adwaita", "suru", "yaru"];
let categories = ["documents", "git", "github", "gitlab", "mac", "pictures", "musics", "script", "templates", "videos"];
let colours = ["60spsychodelic", "90ssummer", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion", "yellow"];
let Set_html = new Set();

for (let a = 0; a < titles.length; a++) {
  const tt = titles[a];
  //console.log(a)
  for (let i = 0; i < styles.length; i++) {
    const style = styles[i];
    if (style == "adwaita") {
      let fake_colours = JSON.parse(JSON.stringify(colours))
      fake_colours.splice(0,2)
      Set_html.add(`<h1>${titles[0]}</h1>`)
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < fake_colours.length; k++) {
          const colour = fake_colours[k];

          Set_html.add(`<p><code>${styles[0]}-plus/folder-${category}-${colour}.svg</code></p>`);
        }
      }
    } 
    else if (style == "suru") {
      Set_html.add(`<h1>${titles[2]}</h1>`)
      let fake_colours = JSON.parse(JSON.stringify(colours))
      fake_colours.splice(fake_colours.indexOf('canonical'),1)
      fake_colours.splice(fake_colours.indexOf('vermillion'),1)
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < fake_colours.length; k++) {
          const colour = fake_colours[k];
          Set_html.add(`<p><code>${styles[1]}-plus/folder-${category}-${colour}.svg</code></p>`);
        }
      }
    } 
    else {
      Set_html.add(`<h1>${titles[2]}</h1>`)
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];

          Set_html.add(`<p><code>${styles[2]}-plus/folder-${category}-${colour}.svg</code></p>`);
        }
      }
    }
  }
}
let newArray = Array.from(Set_html).join('')
document.write(newArray)

and do you know solving the second problem (excluding the determined values of `colours` by `styles`'s array)? — Gustavo Reis, Aug 11 '20 at 23:57
Can you tell me which ones are going to be exclude in where. — Carlos1232, Aug 12 '20 at 00:09
@GustavoReis I had change the code in order to delete those values, remember to do a deep copy of the array an iterate over it in order to not affect the original array. — Carlos1232, Aug 12 '20 at 00:33
wow, you used `splice`. I also tried to use it and it was unsucessfull, the difference is that, I did not `JSON.parse(JSON.stringify(value))` and `indexOf`. But thank you. — Gustavo Reis, Aug 12 '20 at 10:51
Like I said on the answer I used the JSON.parse(JSON.stringify(value)) in order to avoid mutability on the original Array. The indexOf is for finding the index you want to delete. — Carlos1232, Aug 12 '20 at 14:54
I see. I am still learning it because of React and GatsbyJS. As I progreded it, I am working to building a table, using this code, but it still is not sucessfull. — Gustavo Reis, Aug 12 '20 at 15:27

In JavaScript, I can't make unique values of arrays of strings, and exclude determinated values from another array

1 Answers1