Loop / Foreach trough a JS 2 level array

Question

I am building a job list, But.. the client wants me
to group jobs by 'location' - so I collected the items
into groups by location (i might have in a badly formatted way)
and trying to append them back for cant get the forEach to work.

alljobs     = [];
counter     = 1;
departments = {};
var apiurl  = "https://www.comeet.co/careers-api/2.0/company/UID_KEY_HERE/positions/?token=TOKEN_KEY_HERE&details=true";

fetch(apiurl)
    .then(res => res.json())
    .then((out) => {

        $.each(out, function() {
            // console.log(this);

            if(this.department && this.location.name) {

                !(this.location.name in alljobs) ? alljobs[this.location.name] = [] : '';

                alljobs[this.location.name][counter] =  
                '<div class="job-item '+this.uid+' '+string_to_slug(this.department)+'">'
                    +'<div class="row" data-jobid="'+this.uid+'">'
                        +'<div class="col-md-4 item-title"><a href="<?php echo get_permalink($comeet['positions_page']); ?>?jobid='+this.uid+'">'+ this.name +'</a></div>'
                        +'<div class="col-md-2 expertise">'+ this.location.name +'</div>'
                        +'<div class="col-md-3 expertise">'+ this.department +'</div>'
                        +'<div class="col-md-3 job-link"> <a href="<?php echo get_permalink($comeet['positions_page']); ?>?jobid='+this.uid+'" class="btn btn-info gotoPosition" data-jobid="'+this.uid+'"><?php _e("Details", THEME_NAME); ?></a> </div>'
                    +'</div>'
                +'</div>';

                departments[this.department] = '<li class="jobsPicker" data-show="'+string_to_slug(this.department)+'">'+this.department+'</li>';

                counter++;
            }

        });

    })
    .catch(err => { throw err }); 


    
    /********************************************************
    **  APPEND ALL JOBS
    ********************************************************/
    if(alljobs) {
        console.log(alljobs.length);        // RETURNS 0 <--- WHY?!
        console.log(alljobs);

        alljobs.forEach(function(params) {  // DOESNT RUN
            console.log(params);          
        })
    }

Just out of curiosity, have you console.log(alljobs) before running that conditional that executes the forEach? Just to make sure there's something there and your issue is actually with the forEach. Might be helpful. — dSumner.1289
– dSumner.1289, Commented Oct 4, 2020 at 14:59
Try assigning alljobs as a variable, so var alljobs = [], instead of alljobs = [] — dSumner.1289
– dSumner.1289, Commented Oct 4, 2020 at 15:16
Okay...is there somewhere to see this live or is it local or something? — dSumner.1289
– dSumner.1289, Commented Oct 4, 2020 at 15:23

dSumner.1289 · Accepted Answer · 2020-10-05 19:26:03Z

1

I think your issue here is that you're initializing alljobs as an array, but then you're treating it like an object or an associative array when you assign job locations to it.

You can only use key names like that, to make a sort of mock associative array, if you store the data as an object. Javascript doesn't support associative arrays. You're attempting to use an array method (forEach()) that will only work if you are using a standard, indexed JS array. If you need the named keys, use an object, otherwise known as a "hash".

Your best bet is to either initialize it as an object and use Object.keys() to loop through it, or to assign locations to it using alljobs[i] (just an example where i is some sort of numerical counter).

When you check the length property of an array, it's looking for indexes, so alljobs[0], etc. Since you're assigning indexes as property names, i.e. alljobs[this.location.name][counter], your array technically has no length.

[edit]

It's not really best practice to initialize undeclared variables like you are in the first few lines of your code, your best bet is to assign with a keyword such as var, let, or const. Currently you're just polluting the global space, which is almost never recommended.

edited Oct 5, 2020 at 19:26

answered Oct 4, 2020 at 15:36

dSumner.1289

7221 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sagive Over a year ago

I need that key name as its divided into countries that i later hope to append in a specific order. i would try to create a live example so that you might try to help using a live example if you have the time. I dont understand whats not working and why .

dSumner.1289 Over a year ago

So you can only use key names like that, to make a sort of mock associative array, if you store the data as an object. Javascript doesn't support associative arrays. You're attempting to use an array method (forEach()) that will only work if you are using a standard, indexed JS array. If you need the named keys, use an object, otherwise known as a "hash".

Sagive Over a year ago

I see.. so i am mixing my PHP... well, i see no more answers here. Add that explanation to your answer so i could mark it. and thanks again for the help.

Sagive Over a year ago

Thanks for trying... i am still hoping for a way to do this. there must a way - but you got an upvote ;)

dSumner.1289 Over a year ago

I added the explanation...I can try and put together a code snippet that will work once I get a minute, just need to break away from work for long enough.

|

Collectives™ on Stack Overflow

Loop / Foreach trough a JS 2 level array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related