(15) JQuery Arrays

Sharing buttons:

hey guys what's up today we're gonna do

some jQuery arrays and this is important

to know because the same principle

applies in every programming language

that I've ever touched and they're

really useful the reason I like

programming is because it's the only

thing that listens to me all right so to

make an array let's just make a variable

I'll say var ARR for array and I'll do

equals and we do these square brackets

okay and then we put in values let's say

cat dog fish you say well I already know

this that's all right I'm gonna show you

some tricks with it too and then I down

here I have a div idea of box and I'll

do box dot HTML array and I'll refresh

this and nothing appears because it

can't print all these out into it so you

can do with something similar to Java

not JavaScript but Java this is also in

JavaScript that sounds confusing and we

do two strings so it turns this array to

a string and there it lists it out to us

and another one you can do is called

join and this one's a little bit


well it's actually pretty much the same

but our dot join and I'll do a plus and

this will be the space between each of

these items isn't that pretty cool and

an array is a it's pretty handy

they hold pockets of data obviously

alright let's do a couple functions on

this array let's say we want to

add something to the start we do array

dot on shift I'm having trouble

remembering ok unshipped and let's say

food and refresh and that adds it to the

front they say what kind of thing is on

shift what does that mean

well if you type array dot shift this

will remove the first item just just if

you put your hands in the air and just

move them to the left into that like

shift to the left and that will remove

cat ok and unship is like shifting it to

the right and adding something in there

hopefully that's not too confusing but

this is true in PHP as well so shift and

unshift those are good ones to know if

we did our dot length we can get the

length of the thing so in this HTML just

pop in array dot length and it tells us

how many of these items we have if you

need to do that for some reason there's

also one called pop and kind of like the

opposite of shift pop will remove the

last item

okay I'm just gonna put this back into

string again and you see pop just pops

the thing off the end the last item

pretty easy peasy so far it just takes a

little time to remember these you know

let's see who did a very pop let's do a

race slice sliced so we've covered slice

and Python

maybe PHP and stuff it's all the same if

I wanted to select 0-2 position

I guess one it'll go to cat only let me

refresh that you have to assign this

slice there we go basically what slice

is doing is it's saying slice from

position zero and stop at 1 and this is

0 this is 1 so it's gonna stop right

there or my little blinking cursor is

and you know you just slicing it up you

have to assign it okay it's not

referenced but if you have a variable

that's referenced I believe that splice

is and I'll refresh that and that one

actually works in splice is kind of like

the opposite basically where we're

moving 0 to 2 so 0 1 and then right here

where that blinking cursor is is where

we're going to stop or moving ok and if

I did 0 1 it's only going to remove cat

okay and this is a reference meaning it

changes the actual value the same item

in memory okay but the slice you have to

assign it

okay so let's do some funner things if

we had an item let's call this a submit

item input type equals submit mm-hmm and

we wanted to get a series of values okay

let's just say 25 and we're going to

make a fake tag called I don't know ID 2

equals fish ID 3 equals dog we'd have to

use jQuery to pick up each one of these

one by one

and it'd be a little messy an easier way

to do this would just be to put it all

in one field

sorry about the highlighting it's hard

to read okay so we have 25 fish dog I

like to separate my items with these

pipes because they're easy to tell

what's what so I'm gonna get rid of this

out of the box real quick and we can't

get rid of this so we'll say let's get

let me give this an ID actually ID

equals submit so submit a dot a tribute

of RAL okay and let's say data equals

that okay so our data in here is going

to be this right here so let's do data

let's see what it says okay so it has

that in there and what if we wanted to

get one of those one by one what you

would do is I just forgot

each no that will loop through it split

that's it okay so we could say var of

data equals data dot split and we want

to split it by the pipe okay and if i

refresh good it doesn't show up now we

have an array okay so I could do de 2.2

string oops forgot the little things

there refresh and that will show it or

we could use this as an actual array in

our little square items so that'll only

print out the first value and you can

imagine that could be quite useful if we

needed to do something with the data


okay so splits a pretty cool one you say

well what if I want to add an item on

the end of the array also you can do it

this way to data push on let's say hey

and let's do that to string again to

string refresh and there's hay on the

end you just push an item on to the end

and lastly let's do a each loop you're

going to use each loops a lot okay and

this one you start with the dollar sign

or it could be jQuery you know the word


so dollar each okay and we pass what we

want each of we want to do each of the

data array okay so this is what it looks

like down there 25 fish dog and it has

an array for each one of those and we're

gonna do a function and pass in some

stuff for the loop and kind of like a

for each loop in PHP I'm sure most

people are using PHP from now if you're

using jQuery I'll do eye and value or

you could say key value looks just like

a for each loop and I'll put this here

instead of HTML I'm gonna do a pendant

so that it adds on to each other and

what I can say is key plus let's say key


the Val plus new line so that looks a

little scary to read refresh and we get

each one of these elements of the

placeholder and the value and if you

ever needed to use that there it is

I'll make a real normal array so it's

not as confusing so we'll just say data

equals Jessie cho-jen

just okay and there's what it does with

an actual array there is also array

sorting as well which you just do dot

sort and I think that's that and thanks

for watching