Javascript show specific array data from global array data

Question

I need to show specific array data from my global array.

var objSport = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Hiking', 'Fishing']; //Global Array Sport
var objTime = ['10:00', '12:00', '14:00', '16:00', '19:00', '18:00']; //Global Array Sport Time

var wantToShow = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Fishing']; //Without Hiking 19:00

So on that code above, I need to take out/hide Hiking with time 19:00.

Here is the loop JS:

for(var i in objSport)
{
    var newOption = $('<th class="th"><div class="name">'+wantToShow[i]+'</div><div class="time">'+objTime[i]+'</div></th>');
    $('.tblSport').append(newOption);
}

and table HTML:

<table class="tblSport"></table>

I tried to run the code, Hiking is hide now but the time is not hide.

var wantToShow = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Fishing']; //without hiking
var objSport = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Hiking', 'Fishing'];
var objTime = ['10:00', '12:00', '14:00', '16:00', '19:00', '18:00'];

for(var i in objSport)
{
    var newOption = $('<th class="th"><div class="name">'+wantToShow[i]+'</div><div class="time">'+objTime[i]+'</div></th>');
    $('.tblSport').append(newOption);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="tblSport"></table>

You should be careful when using `for .. in` over an array; see [Why is using “for…in” for array iteration a bad idea?](https://stackoverflow.com/q/500504/215552) — Heretic Monkey, Dec 29 '20 at 03:26

Kevin Zhang · Accepted Answer · 2020-12-29T03:17:02.500

1

Here is the code, one more if statement check.

var wantToShow = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Fishing']; //without hiking
var objSport = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Hiking', 'Fishing'];
var objTime = ['10:00', '12:00', '14:00', '16:00', '19:00', '18:00'];

for(var i in objSport)
{
    if(wantToShow.indexOf(objSport[i]) > -1) {
      var newOption = $('<th class="th"><div class="name">'+objSport[i]+'</div><div class="time">'+objTime[i]+'</div></th>');
    $('.tblSport').append(newOption);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="tblSport"></table>

edited Dec 29 '20 at 03:17

answered Dec 29 '20 at 02:48

Kevin Zhang

1,012
6
14

Hi Sorry, I just check for `fishing` time is `18:00` not `19:00` – HiDayurie Dave Dec 29 '20 at 03:07
Oops! Sorry, just revise the answer. – Kevin Zhang Dec 29 '20 at 03:17
You should be careful when using `for .. in` over an array; see [Why is using “for…in” for array iteration a bad idea?](https://stackoverflow.com/q/500504/215552) – Heretic Monkey Dec 29 '20 at 03:27
Hi @KevinZhang I have another question still related with this. https://stackoverflow.com/questions/65488767/javascript-show-specific-array-data-from-global-array-data-with-another-case – HiDayurie Dave Dec 29 '20 at 07:31

D. Seah · Answer 2 · 2020-12-29T04:15:58.917

1

you should be able to do this

var wantToShow = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Fishing'];
var objSport = ['Football', 'Rugby', 'Tennis', 'Badminton', 'Hiking', 'Fishing'];
var objTime = ['10:00', '12:00', '14:00', '16:00', '19:00', '18:00'];

objSport.forEach((sport, i) => {
    if (wantToShow.includes(sport)) {
        var newOption = $('<th class="th"><div class="name">'+ sport +'</div><div class="time">'+objTime[i]+'</div></th>');
        $('.tblSport').append(newOption);
    }
});

edited Dec 29 '20 at 04:15

answered Dec 29 '20 at 02:50

D. Seah

4,472
1
12
20

1

Consider using `includes(sport)` instead of `indexOf(sport) !== -1` for a more modern approach. – Heretic Monkey Dec 29 '20 at 03:28

score 0 · Answer 3 · answered Dec 29 '20 at 03:29

You can use a array object. Can as code:

var objSport = [{
    name: 'Football',
    time: '10:00'
  },
  {
    name: 'Rugby',
    time: '12:00'
  },
  {
    name: 'Tennis',
    time: '14:00'
  },
  {
    name: 'Badminton',
    time: '16:00'
  },
  {
    name: 'Hiking',
    time: '19:00'
  },
  {
    name: 'Fishing',
    time: '18:00'
  }
];

objSport.forEach((item) => {
    var newOption = $('<th class="th"><div class="name">'+ item.name +'</div><div class="time">'+ item.time + '</div></th>');
    $('.tblSport').append(newOption);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblSport"></table>

Javascript show specific array data from global array data

3 Answers3

Linked