Jump to content

kayut

Members
  • Content count

    19
  • Joined

  • Last visited

Community Reputation

0 Neutral

About kayut

  • Rank
    Newbie
  1. I managed to fix it as follow: HTML <ul id="container" class="cf"></ul> <script id="ourTemplate" type="text/x-handlebars-template"> <!-- Data coming from staff array --> {{#each staff}} <li class='list-container'> <div class='img-container'><img src="{{ this.image_url }}"></div> <div class='name-container'>{{ this.name }}</div> </li> {{/each}} <!-- Data coming from the results array --> {{#each results}} <li class='list-container results'> <div class='img-container'><img src="{{ this.picture.medium }}"></div> <div class='name-container'>{{ this.name.first }} {{ this.name.last }}</div> </li> {{/each}} </script> JavaScript const apiRequest1 = fetch('https://randomuser.me/api/?results=10').then(function(response){ return response.json() }); const apiRequest2 = fetch('https://api.jikan.moe/anime/1/characters_staff').then(function(response){ return response.json() }); let combinedData; Promise.all([apiRequest1,apiRequest2]).then(function(data){ firstAPI = data[0]; console.log(firstAPI); secondAPI = data[1]; console.log(secondAPI); combinedData = {...firstAPI, ...secondAPI}; console.log(combinedData); createHtml(combinedData); // createHtml(combinedData.results); // return combinedData; }) .catch(function(error) { console.log('Looks like there was a problem: \n', error); }); // Function to generate the HTML function createHtml(ourData) { // ourData is just a parameter and can be named anything let rawTemplate = document.querySelector("#ourTemplate").innerHTML; let compiledTemplate = Handlebars.compile(rawTemplate); let ourGeneratedHTML = compiledTemplate(ourData); let ourContainer = document.querySelector("#container"); ourContainer.innerHTML = ourGeneratedHTML; } Of course I had to run handlebars.js #each twice, once for each Ajax response.
  2. Hi, In the following example I'm using fetch.all to combine two different API requests. fetch.all and Handlebars.js The unordered list, which is created by using Handlebars.js is showing all staffs from the second request. Now my question: How can I add the result of the first request to the same unordered list?
  3. Hey, Can some one please explain to me why this works: let myNames = ['apple', 'orange', 'lemon']; let output = myNames.map(function(item){ return item; }); console.log(output); But the same code with forEach doesn't work? let myNames = ['apple', 'orange', 'lemon']; let output = myNames.forEach(function(item){ return item; }); console.log(output); Isn't it that myNames is an array and forEach is a built-in method of Array? Why is that the forEach is not working? Thanks
  4. Thanks, it makes sense. But I still don't get this code: outerFunction().kir(); I know that you can access the method kir of an object with myObject.kir(); But I have never seen myObject().kir(); Could you guys please explain a bit about it?
  5. Hey, If I use a closure inside an IIFE like this: var outerFunction = (function() { // this is an IIFE const outer = `I'm the outer function!`; var innerFunction = function() { const inner = `I'm the inner function!`; console.log(outer); // I'm a variable from the outer function! } return { kir:innerFunction } })(); It seems to me that the IIFE returns an object called outerFunction and add the method kir to it. So that now, I can access the kir method of the object outerFunction with the following code: outerFunction.kir(); But if I don't use an IIFE for the same example: function outerFunction () { const outer = `I'm the outer function!`; var innerFunction = function() { const inner = `I'm the inner function!`; console.log(outer); // I'm the variable from the outer function! } return { kir:innerFunction } } I can access the method kir only if I run this: outerFunction().kir(); Why it doesn't work if I run this?: outerFunction(); outerFunction.kir(); It seems to me that in the first example, when the IIFE runs automatically, it returns the object outerFunction and add the method kir to it. But when I run outerFunction manually, it's different and I can't access the method kir. I'm a bit confused! Can some one please explain to me why I can't access kir method in the second example by running this?: outerFunction(); outerFunction.kir(); I guess this is more a question about understanding IIFE rather than the closure. Thanks
  6. @iwato, I think you didn't read my question properly. Your answer has nothing to do with my question. First, this is a forum for JavaScript and not for jQuery. Second, my question is about forEach and your solution has nothing to do with forEach!
  7. Hey, I have two divs with class demo and want to change their border. I can do this as follow: <div class="demo">first div</div> <div class="demo">second div</div> let myClass = document.getElementsByClassName('demo'); console.log(myClass); // is an array for (i = 0; i < myClass.length; i++) { myClass[i].style.border = '1px solid red'; } I know that myClass is an array. So, I should be able to iterate through it with forEach method, isn't it? But how? Thanks
  8. Hey, There are 3 different ways to create a new object: let myObject = {}; var myObject = { name: “Engage", days: 30 } var myObject = new Object(); Now my question is about the 2 different ways of instantiating a new object. You can either use an existing object as prototype of your new object, like this: var person = { name: "David", age: 20, }; // Create theDude object and use person object as its prototype var theDude = Object.create(person); Or you can use a Constructor function to create your new object like this: function Person (name) { this.name = name; this.age = 20; this.getInfo = function getInfo() { return this.name + ' is ' + this.age + ' years old.'; }; } // Instantiating a new object using the new keyword and a constructor function var theDude = new Person("David"); My question is: What is the difference between the last 2 methods of instantiating a new object? Which method is more recommended? In the real world, which one is used more? Thanks
  9. Hi, Looking at this Pen: Animation I like to achieve that when the animation of the second element starts only after the animation of the first element is finished. When the animation of the second element is finished, the animation of the first element should start and so on (infinitive). I know that I used JavaScript in this (not working) example but I'm more than happy to have a working jQuery solution. Thanks
  10. Hi, I'm just learning the JavaScript touch event. For this I created this example: Example on Codepen In the above example, you can grab the element and move it to the right or left. It works. However I want to limit the horizontal movement of the element (for example only 100px to the left and 100px to the right). How can I do this? Thanks
  11. Hi, In the following script, each time you click the button it shows 4 more elements: Load 4 more elements I need to change the script so that when all elements are visible and you click again the button, all elements get hidden except of the first 4 elements. I tried for hours but couldn't find any solution. Could you please help me? Thanks
  12. Hi, I need to create a carousel (slider) which should like something like this: Which jQuery (or any other) carousel can I use for it? Thanks
  13. kayut

    JSON: Why does each property show twice!

    Thanks for your help. I found and fixed the issue now.
  14. Hi, looking at this example of Plunker: http://plnkr.co/edit/z0bnxjV2XkBZC0yJxL7Z?p=preview can some one please tell my why does each answer and each question coming from the JSON file show twice? Thanks
  15. kayut

    A tricky question about margin

    I just want to understand it. I mean if the first <p> element 50px margin-bottom and the second <p> element 50px margin-top has then the distance between two paragraphs should be 100px. Why is it still 50px ????
×