Category: Javascript

Promise

A promise is a JavaScript object that allows you to make asynchronous (aka async) calls. It produces a value when the async operation completes successfully or produces an error if it doesn’t complete. A promise may be in one of 3 possible states: fulfilled, rejected, or pending.

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

myResolve(); // when successful
myReject(); // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
)

 

  1. A “producing code” that does something and takes time. For instance, some code that loads the data over a network.
  2. A “consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result.
  3. A promise is a special JavaScript object that links the “producing code” and the “consuming code” together. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready.

Interview challenge : getMovieTitles

Myriad Systems.

To solve this challenge, write an HTTP GET method to retrieve information from a particular movie database.

https://stackoverflow.com/questions/48448432/fragment-of-missing-code-in-the-solution-movie-titles-complete-a-challenge-more

function getMovieTitlesData(title, page = 1) {
   const url = 'https://jsonmock.hackerrank.com/api/movies/search/?Title=' + title + '&page=' + page;
   console.log('URL:',url);
   const titles = [];
   return new Promise((resolve, reject) => {
      fetch(url, {
        method: 'get',
      }).then((response) => {
        return response.json();
      }).then((jsondata) => {
        for (let i = 0; i < jsondata.data.length; i++) {
           titles.push(jsondata.data[i].Title);
      }
      var total_pages = Number(jsondata.total_pages); 
      var curpage = Number(jsondata.page); 
      resolve({
         titles : titles,
         page : page,
         total_pages : total_pages
      });
    }).catch((error) => {
      console.log("Failure", error);
    })
  })

}


function getMovieTitles(substr) {
   const promises = [];
   const titles = []; 
   getMovieTitlesData(substr).then(result => {
     titles.push(...result.titles);
     for (let i = result.page + 1; i <=result.total_pages; i++) {
        promises.push(getMovieTitlesData(substr, i));
     }
     Promise.all(promises).then(datas => {
       datas.forEach(data => {
          titles.push(...data.titles);
       });
       console.log(titles.sort());

     });
  })
}

getMovieTitles('spiderman');

 

 

ES6 / ES2015 Additions

Arrow functions (or fat functions)?Arrow functions (or fat functions)

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

The key difference, despite being shorter to write, is that arrow functions do not create their own value for ‘this’.


If the function body contains just a single statement, you can omit the brackets and write all on a single line:

const myFunction = () => doSomething()

https://flaviocopes.com/javascript-arrow-functions/

(parameters) => { statements }

Arrow functions and Lexical this

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Template Strings / Template Literals


https://wesbos.com/javascript-template-strings/

Object Destructuring

https://dev.to/sarah_chima/object-destructuring-in-es6-3fm

Adding to Array

[…oldArray, itemToAdd]

A simple todo app in javascript

Asked in Box onsite interview. With a node.js server on backend. 

$().ready(function() {
   $('#add').on('click', addTask);
   $('#tasks').on('click', markComplete);
   // Alternative way
   // var tasksElement = document.getElementById('tasks');
   // tasksElement.addEventListener('click', markComplete);
   //document.getElementById('task-input').onkeydown = function(e){
   $('#task-input').on('keydown', function(e) {
       if(e && e.keyCode == 13){
            addTask();
       }
   });

   function renderTask(result) {
        var checkboxContainerId = 'check' + result.id;
        var taskTextId = 'tasktext-' + result.id;
        if (result.done == '1') {
            checkedState = ' checked ';
        } else {
            checkedState = '';
        }
        taskHtml = '
  • ';
        taskHtml += '';
        taskHtml += '' + result.data + '
    • ';
        $('#tasks').append(taskHtml);
   }

   function taskAdded(result) {
        renderTask(result);
        $('#task-input').val('');
   }

   function renderResults(results) {
        results.forEach(renderTask);
   }

   function addTask(e) {
       url = 'http://localhost:9898/todo/tasks/create';
       inputData = $('#task-input').val();

       if (!inputData) {
           return;
       }
       $.ajax({
           url: url,
           type: "POST",
           data: {data: inputData} ,
           success: taskAdded,
       });
    }

    function markComplete(e) {
        var done;
        if (e.target && e.target.matches("input.task-checkbox")) {
            var taskId = $(e.target).attr('task-id');
            if ($(e.target).is(":checked")) {
                done = "1";
            } else {
                done = "-1";
            }
            var editUrl = 'http://localhost:9898/todo/tasks/' + taskId + '/edit';
            $.ajax({
               url: editUrl,
               type: "POST",
               data: {done: done},
               success: function(result) {
               }
            });
        }
    }

    var getTasksUrl = 'http://localhost:9898/todo/tasks';
    $.ajax({
       url: getTasksUrl,
       type: "GET",
       success: renderResults,
    });
}
);