Extracting values ​​from 2 arrays using Javascript and removing duplicate "headers" ...?

Question

This is probably a simple question, but I can't seem to get around it.

I have two corresponding arrays, for example.

'0' => "Difficulty"
'1' => "Difficulty"
'2' => "Difficulty"
'3' => "Specialty"
'4' => "Specialty"
'5' => "Specialty"
'6' => "imagecontent"
'7' => "ShowMe"
'8' => "ShowMe"

and

 '0' => "Easy"
'1' => "Average"
'2' => "Difficult"
'3' => "Specialty name x"
'4' => "Specialty name y"
'5' => "Specialty name z"
'6' => "All"
'7' => "Questions I have never seen"
'8' => "Questions I have answered incorrectly"

Arrays correspond to the filter settings for a group of questions; the first array refers to the "filter header", and the second array refers to the selection for each filter - "Filter Value". For each filter there can be several samples, therefore, for example, there are duplicate instances of the "Difficulties" filters and the "Specialty".

I want to display the values ​​on the page to show the user which filter settings they apply.

I started with the following:

for (i = 0; i < filterID.length; i++) {
$( "div.currentFS" ).append("<div class='fs " + [i] + "'>" + filterID[i] + ": " +  filterValue[i] + "</div>");
}

... , . , , , .

,

: : :

... :

: , , ​​.

, , .

.

,

.

Answer 1

, , , :

var filterID = [
  "Difficulty",
"Difficulty",
"Difficulty",
"Specialty",
"Specialty",
"Specialty",
"imagecontent",
"ShowMe",
"ShowMe"
];
var filterValue = [
"Easy",
"Average",
"Difficult",
"Specialty name x",
"Specialty name y",
"Specialty name z",
"All",
"Questions I have never seen",
"Questions I have answered incorrectly"
];

var current = ""; // Keep track of the current ID

for (var i = 0; i < filterID.length; i++) {
    if (filterID[i] !== current) { // If the ID in the loop isn't current...
        current = filterID[i];     // store it...
        $(document.body).append("<br><b>"+ current + ": </b>"); // and add it.
    }
    $(document.body).append("<span>" + filterValue[i] + "</span>");
}

span { padding: 8px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Hide result

Answer 2

, ?

var filters = {
    Difficulty: ["Easy", "Average", "Difficult"],
    Specialty: ["Specialty name x", "Specialty name y", "Specialty name z"],
    imagecontent: ["All"],
    ShowMe: ["Questions I have never seen",
            "Questions I have answered incorrectly"]
};

, , :

var titles = ["Difficulty", "Difficulty", "Difficulty", "Specialty",
        "Specialty", "Specialty", "imagecontent", "ShowMe", "ShowMe"];

var values = ["Easy", "Average", "Difficult", "Specialty name x",
        "Specialty name y", "Specialty name z", "All",
        "Questions I have never seen",
        "Questions I have answered incorrectly"];

var filters = {};

titles.forEach(function(title, index){
    var value = values[index];
    filters[title] = filters[title] || [];
    filters[title].push(value);
});

console.log(filters);

// And to print:
Object.keys(filters).forEach(function(title){
    console.log(title + ': ' + filters[title].join(', ') + '.');
});

Hide result

Answer 3

, , :

var filters = {},
    i, ID, value,
    filter;

for (i = 0; i < filterValue.length; i++) { // iterate through the current arrays
    ID = filterID[i];
    value = filterValue[i];

    // if this is the first time we've seen this ID, create an array to hold its values
    if (!filters.hasOwnProperty(ID)) {
        filters[ID] = [];
    }

    filters[ID].push(value); // push the latest value to the array
}

filters, :

{
    "Difficulty":   ["Easy", "Average", "Difficult"],
    "Specialty":    ["Specialty name x", "Specialty name y", "Specialty name z"],
    "imagecontent": ["All"],
    "ShowMe":       ["Questions I have never seen", "Questions I have answered incorrectly"]
} 

:

for (var filter in filters) {
    $("<div></div>")
        .addClass("fs")
        .text(filter + ": " + filters[filter].join(', '))
        .appendTo("div.currentFS");
}

Answer 4

- : -

var filters = [
    filter: { category: "Difficulty", values: ["Easy", "Average", "Difficult"] ,class: "difficultyClass"  },
    filter: { category: "Specialty", values: ["Specialty name x", "Specialty name y", "Specialty name z"], class: "difficultyClass"}   
];

- : -

var currentFS = $( "div.currentFS" );
for (filter in filters) {
   var myFilterDiv = "<div class='fs " + filter.class+ "'>"+filter.category;
   for(value in values) {
      currentFS.append(myFilterDiv + ":" + value +"</div>");  
   }
}