Fetching movie data using jQuery Requirements


Display movie datas inside all tags that have the class movie_list
Make an ajax call for fetching movie datas
Fill loading text before fetch data
If any error occurs during loading, the content should be empty

What I did


Cached all elements which have the class movie_list
Made functions which have only one responsibility 
Functions take movieList elements for making easy to unit test

What I want to know


More readable/reusable code
Any performance improvement point
Any good design pattern on here



function loadMovies() {
   const url = 'http://moviedatas.com/movies';
   const movieList = $('.movie_list');

   setOnLoading(movieList);

   $.ajax({
       method: 'GET',
       url: url,
       data: {
           count: 10
       },
       success: function(response) {
           movieList.each(function() {
               const wrapper = $(this);

               render(wrapper, items);
           });
       },
       error: function(error) {
           onError(movieList);
       }
   })
}

function setOnLoading(movieList) {
   movieList.each(function() {
       $(this).html('Loading...');
   });
}

function render(wrapper, items) {
   const template = `&lt;div class="movie_item"&gt;
 &lt;div class="title"&gt;{title}&lt;/div&gt;
 &lt;div class="desc"&gt;{description}&lt;/div&gt;
&lt;/div&gt;`;

   let movies = '';
   for (let i = 0; i &lt; items.length; i++) {
       movies += template
           .replace('{title}', items[i].title)
           .replace('{description}', items[i].description);
   }

   wrapper.html(movies);
}

function onError(movieList) {
   movieList.each(function() {
       $(this).html('');
   });
}
As pointed out by Blindman67: in render(wrapper, items);, items is not defined.



const url = 'http://moviedatas.com/movies';



Const variable used only one time, you can remove it and write url: http://moviedatas.com/movies

Same for

const wrapper = $(this);

Use ES6 arrow function shortcut syntax () =&gt;


    success: function(response) {
        movieList.each(function() {
            const wrapper = $(this);

            render(wrapper, items);
        });
    },



7 lines in one, shorter is cleaner.

success: (response) =&gt; movieList.each(() =&gt; render($(this), response.items)),


error: function(error) {
    onError(movieList);
}



If you don't use error XHR response, just write

error: () =&gt; onError(movieList)

Write jsDoc docstring above functions to help developers and IDE understanding what is happening.
If functions are becoming inline, you may write them directly in caller function.


Full review (without docstring)

function loadMovies() {
   const movieList = $('.movie_list');

   // setOnLoading
   movieList.each(() =&gt; $(this).html('Loading...'));

   $.ajax({
       method: 'GET',
       url    : 'http://moviedatas.com/movies',
       data   : { count: 10 },
       success: (response) =&gt; movieList.each(() =&gt; render($(this), response.items))
       error  : () =&gt; movieList.each(() =&gt; $(this).html(''));
   });
}

function render(wrapper, items) {
   const template = `&lt;div class="movie_item"&gt;
     &lt;div class="title"&gt;{title}&lt;/div&gt;
     &lt;div class="desc"&gt;{description}&lt;/div&gt;
    &lt;/div&gt;`;

   let movies = '';

   for (let i = 0; i &lt; items.length; i++) {
       movies += template
           .replace('{title}', items[i].title)
           .replace('{description}', items[i].description);
   }

   wrapper.html(movies);
}


Also, I don't understand the logic of getting a movie list data and then iterating over a movie list HTML to put movies in. It becomes a list of list of movies...