Getting only first key in for loop when calling some function inside it in JavaScript

Question

I have a function CellDisplay. Calling this function in another function forLaunch, this forLaunch function is getting called again in a loop Obj.forEach which consist of array of object. If I log the key console.log(key) in the forLaunch function it's showing only first key. I need all the key to display. Here is the code below

Javascript

const CellDisplay = item => {
  switch (item) {
    case 'item1':
      return 'one';
    case 'item2':
      return 'two';
    case 'item3':
      return 'three';
    case 'item4':
      return 'four';
    case 'item5':
      return 'five';
  }
};
const forLaunch = lData => {
  for (const key in lData) {
    console.log(key);
    return CellDisplay(key);
  }
}

const Obj = [{
  Id: 575,
  items: {
    item1: '2020-12-08T10:00:00.000+0000',
    item2: '2020-11-12T00:00:00.000+0000',
    item3: '2020-12-08T10:00:00.000+0000',
    item4: null,
    item5: '2020-12-08T10:00:00.000+0000'
  },
  active: false
}];
Obj.forEach(data => {
  forLaunch(data.items);
});

score 2 · Answer 1 · answered Dec 18 '20 at 17:51

2

You have a return statement in your for loop that stop the function execution after the first iteration.

answered Dec 18 '20 at 17:51

P.E. Joëssel

1,393
10
18

Thanks for the answer,I cannot remove return I need it for some requirement in project and also need all the items to display.Is there any other way to handle it? – anguler-developer Dec 18 '20 at 18:28

score 2 · Answer 2 · answered Dec 18 '20 at 17:51

2

You have a return statement in your for loop, so as soon as you hit the return statement the first time, you're broken out of the forLaunch method and subsequently, out of the for loop.

If you were to change return CellDisplay(key) to console.log(CellDisplay(key)) for example, you would get all of the CellDisplay values being printed out.

answered Dec 18 '20 at 17:51

Ibz

437
2
7

Doesn't even need the `console.log(CellDisplay(key))`, since there's a log statement just above it already. This is indeed the issue though. – zcoop98 Dec 18 '20 at 17:53
1

You're sort of right. The console.log above it just prints out the key, e.g `item1`, but he said he wants to print `one`. Wasn't sure if that meant just `one` or `one` in addition to `item1` – Ibz Dec 18 '20 at 17:56
I want to print all item1 item2 item3 item4 item5 – anguler-developer Dec 18 '20 at 18:13
@anguler-developer oh, well if that's literally all you wanted, then just delete the return line in `forLaunch` – Ibz Dec 18 '20 at 18:15
I am using this code in Gantt chart in my project. so if I remove there my functionality not working https://stackoverflow.com/questions/65362972/in-dhtmlx-gantt-chart-getting-some-repetition-of-data-in-gantt-config-scales – anguler-developer Dec 19 '20 at 10:47

Andrew Lohr · Answer 3 · 2020-12-21T15:57:33.110

0

As others said the return in your loop short circuits the loop so it only runs once. Remove that, but also change the loop to a for...of loop so you get the values of the array (item1, item2, etc..) instead of the index.

const CellDisplay = item => {
  switch (item) {
    case 'item1':
      return 'one';
    case 'item2':
      return 'two';
    case 'item3':
      return 'three';
    case 'item4':
      return 'four';
    case 'item5':
      return 'five';
  }
};
const forLaunch = lData => {
  let tempArr = [];
  for (const key of lData) {
    tempArr.push(CellDisplay(key));
  }
  return tempArr;
}

const Obj = [{
  Id: 575,
  items: {
    item1: '2020-12-08T10:00:00.000+0000',
    item2: '2020-11-12T00:00:00.000+0000',
    item3: '2020-12-08T10:00:00.000+0000',
    item4: null,
    item5: '2020-12-08T10:00:00.000+0000'
  },
  active: false
}];

Obj.forEach(data => {
  let tempArr = forLaunch(Object.keys(data.items));
  console.log(tempArr)
});

edited Dec 21 '20 at 15:57

answered Dec 18 '20 at 17:53

Andrew Lohr

5,380
1
26
38

Thanks for the answer, I cannot remove return and also need all the items to display.Is there any other way to handle it? – anguler-developer Dec 18 '20 at 18:26
@anguler-developer why can't you remove the return? and if you can't remove it what do you expect the return result to be? – Andrew Lohr Dec 18 '20 at 20:03
I am using this code in Gantt chart in my project. so if I remove there my functionality not working https://stackoverflow.com/questions/65362972/in-dhtmlx-gantt-chart-getting-some-repetition-of-data-in-gantt-config-scales – anguler-developer Dec 19 '20 at 04:24
@anguler-developer how about pushing the cellDisplay values to a temp array and returning that? If this isn't what you're talking about then you'll have to give way more detail on the structure of your code and exactly what you expect for things to work. – Andrew Lohr Dec 21 '20 at 15:58
I edited my answer above so check it out again. – Andrew Lohr Dec 21 '20 at 15:58

Getting only first key in for loop when calling some function inside it in JavaScript

Javascript

3 Answers3