How to Build a Loop in JavaScript

How do I build a loop in JavaScript?

For loops

for (i = startValue; i <= endValue; i++) {
    // Before the loop: i is set to startValue
    // After each iteration of the loop: i++ is executed
    // The loop continues as long as i <= endValue is true
}

For...in loops

for (i in things) {
    // If things is an array, i will usually contain the array keys *not advised*
    // If things is an object, i will contain the member names
    // Either way, access values using: things[i]
}

It is bad practice to use for...in loops to itterate over arrays. It goes against the ECMA 262 standard and can cause problems when non-standard attributes or methods are added to the Array object, e.g. by Prototype.
(Thanks to Chase Seibert for pointing this out in the comments)

While loops

while (myCondition) {
    // The loop will continue until myCondition is false
}

How to create a dynamic object in a loop?

var objects = {};

for (var x = 0; x < 100; x++) {
  objects[x] = {name: etc};
}

how to make an infinate loop in javascript

You could use setInterval and clearInterval. A truly infinite loop would look like this:

while (true) doSomething();

But that is not what anyone wants, as it will block the user interface. Using setTimeout or setInterval you allow the event loop to continue to do its work.

I'll assume you want to repeat calling the function doSomething in this demo:

const backgroundButton = document.getElementById("backgroundButton"); 
let timer = 0;
const output = document.getElementById("output");

backgroundButton.addEventListener("click", function(){   
    if (timer == 0) {
        console.log('button was off');
        //start loop
        timer = setInterval(doSomething, 50);        
    }
    else {
        console.log('button was on');
        //stop loop
        clearInterval(timer);
        timer = 0;
    }
});

function doSomething() {
    output.textContent = +output.textContent + 1;
}

<button id="backgroundButton">Start/Stop</button>
<div id="output"></div>

Dynamically Create Object with For Loop

In your case, If you want to use for in you can do this

const obj = {};
for (i in result) {
  obj[result[i].tag] = {
    name: result[i].name,
    service: result[i].specialty.replace(' ', '_'),
    shift: result[i].shift,
    office: result[i].office,
    cell: result[i].cell,
  }
}
console.log(obj) // will have your answer

but I recommend using reduce

.then((data) => {
  connection.query("SELECT * FROM amion_onCall",
    function (err, result) {

      const obj = result.reduce((o, item) => {
        o[item.tag] = {
          name: item.name,
          service: item.specialty.replace(' ', '_'),
          shift: item.shift,
          office: item.office,
          cell: item.cell,
        }
        return o
      }, {});

      console.log(obj)
    })
})

javascript create array from for loop

even shorter if you can lose the yearStart value:

var yearStart = 2000;
var yearEnd = 2040;

var arr = [];

while(yearStart < yearEnd+1){
  arr.push(yearStart++);
}

UPDATE:
If you can use the ES6 syntax you can do it the way proposed here:

let yearStart = 2000;
let yearEnd = 2040;
let years = Array(yearEnd-yearStart+1)
    .fill()
    .map(() => yearStart++);

Javascript - loop to create list of cards

Use Array.prototype.map function and a template literal.

const container = document.getElementById('products-cards-container');
const valuesCards = [{
    image: '../img/image1.png',
    title: 'title 1',
    content: 'super content 1',
  },
  {
    image: '../img/image2.png',
    title: 'title 2',
    content: 'super content 2'
  },
  {
    image: '../img/image-3.png',
    title: 'title3',
    content: 'blablablablbalbalbabla blablaba'
  },
]

function returnCards(valuesCards) {
  return "<div class=\"products-cards\">" + valuesCards.map(valuesCard => `
  <div>
    <div class="product-header">
      <img src="${valuesCard.image}"/>
    </div>
    <div class="product-content">
      <h4>${valuesCard.title}</h4>
      <p>${valuesCard.content}</p>
    </div> 
    <button class="info-button">+ info</button>
  </div>`).join('') + "</div>";
}

container.innerHTML = returnCards(valuesCards);

<div id="products-cards-container"></div>

---

Related Topics