Filtering Movielist JavaScript

I am trying to filter the movie list when i compare the category with the value of select. But I am having some issues specially with the movies that contains more than one categor

Solution 1:

First of all, you'll need a helper function to performs XMLHttpRequest properly in order to return data asynchronously. For example:

var newXHR = null;

function sendXHR(options, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  options.contentType = options.contentType || "application/x-www-form-urlencoded";
  newXHR.open(options.type, options.url, true);
  newXHR.setRequestHeader("Content-Type", options.contentType);
  newXHR.send(options.data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

In this example, we show how to configure the XMLHttpRequest object to perform asynchronous requests and assign the response in a callback function.

Usage:

sendXHR({
  url: "https://gist.githubusercontent.com/dannyjhonston/288a0555179f379008e901d9d5f034a3/raw/03519253848040cd8c7d68dceb0e5a53755e5f52/movies.json",
  type: "GET"
}, function(response) {
  console.log(response); // Contains data from the url.
  // Performs other operations with the response.
});

With the given response, fill the categories with this function:

function fillCategories(data) {
  var selection = document.getElementById("selection"), html = "", len = data.categories.length;
  html += "<option>-- Select Genre --</option>";
  for (var i = 0; i < len; i++) {
    html += "<option value=\"";
    html += data.categories[i];
    html += "\">";
    html += data.categories[i];
    html += "</option>";
  }
  selection.innerHTML = html; // Render the html.
  selection.onchange = function() { // When the selection field is changed call the printOutput function.
    printOutput(this.value); // this.value is the selected genre.
  };
}

With the selected genre, fill the output with this function:

function printOutput(genre) {
  var result = data.movies.filter(function(x) {
      return x.categories.indexOf(genre) > -1;
    }), output = document.getElementById("output"), len = result.length, html = "";
  for (var i = 0; i < len; i++) {
    html += "<li>";
    html += result[i].title;
    html += "</li>";
  }
  output.innerHTML = html;
}

In the previous function, I'm using Array.prototype.filter() to return a new array with the movies that correspond to the selected category, by using x.categories.indexOf (genre) > -1;.

Something like this:

(function() {
  var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.
  var data = {}; // This variable is declared in the global scope.

  function sendXHR(options, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    options.contentType = options.contentType || "application/x-www-form-urlencoded";
    newXHR.open(options.type, options.url, true);
    newXHR.setRequestHeader("Content-Type", options.contentType);
    newXHR.send(options.data);
    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }
  sendXHR({
    url: "https://gist.githubusercontent.com/dannyjhonston/288a0555179f379008e901d9d5f034a3/raw/03519253848040cd8c7d68dceb0e5a53755e5f52/movies.json",
    type: "GET"
  }, function(response) {
    data = JSON.parse(response);
    fillCategories(data);
  });

  function printOutput(genre) {
    var result = data.movies.filter(function(x) {
        return x.categories.indexOf(genre) > -1;
      }), output = document.getElementById("output"), len = result.length, html = "";
    for (var i = 0; i < len; i++) {
      html += "<li>";
      html += result[i].title;
      html += "</li>";
    }
    output.innerHTML = html;
  }

  function fillCategories(data) {
    var selection = document.getElementById("selection"),
      html = "", len = data.categories.length;
    html += "<option>-- Select Genre --</option>";
    for (var i = 0; i < len; i++) {
      html += "<option value=\"";
      html += data.categories[i];
      html += "\">";
      html += data.categories[i];
      html += "</option>";
    }
    selection.innerHTML = html;
    selection.onchange = function() {
      printOutput(this.value);
    };
  }
}());

<select id="selection"></select>
<ul id="output"></ul>

Solution 2:

Yo have some errors in you logic.

1. the loop is associated to movies.length with i variable but you are trying to use it to get categories index as well.

Try to split you logic to manage categories and then movies.I mean create 2 separated loops...

for(var i = 0; i < data.movies.length; i++)
{
  //movies html generation
}

for(var i = 0; i < data.categories.length; i++)
{
  //categories html generation
}

2 your movies contains categories properties as string and you are trying it as array.

So inside movies loop, do something like this...

for(var i = 0; i < data.movies.length; i++)
{
   data.movies[i].categories = data.movies[i].categories.split(',');
   //movies html generation
}

Notice You can use the navigator developer tool to debug your code.

Solution 3:

var movieList = {
    "movies": [{
        "title": "Mad Max",
        "categories": "action"
    }, {
        "title": "Willow",
        "categories": "action,fantasy"
    }, {
        "title": "Alien",
        "categories": "action,sci-fi"
    }, {
        "title": "Silence of the lambs",
        "categories": "thriller"
    }, {
        "title": "The Ring",
        "categories": "horror"
    }, {
        "title": "Gone with the wind",
        "categories": "drama"
    }, {
        "title": "Lion King",
        "categories": "animation, family"
    }, {
        "title": "Jumanji",
        "categories": "action,fantasy, family"
    }, {
        "title": "Heat",
        "categories": "action,thriller"
    }, {
        "title": "Blade runner",
        "categories": "action,sci-fi"
    }],
    "categories": ["action", "sci-fi", "drama", "thriller", "horror", "fantasy", "family", "animation"]
}

var movieArray = movieList.movies.map(function(a) {
	return {
  	"title": a.title,
    "categories": a.categories.split(",")
  }
})

console.log(movieArray);

console.log(movieArray.filter(function(a) {
    return a.categories.includes("thriller")
}));

Hope this helps you with your data formatting.