returning values from arrays in javascript

I

iDenTiTy

Expert Member
Joined
Apr 14, 2007
Messages
3,899
Reaction score
2
Location
Fourways (vicinity)
Hi guys.

I am totally new to javascript. I have a big problem.

I have a dropdown list,
A textbox,
A button,
A checkbox.

I also have 1 array with 3 values across.

How do I search through the array and only return certain values when the checkbox is ticked?
When it is not ticked it must return all values.

:confused:

One would type in 3 characters into the textbox, and tick the checkbox. The dropdownlist would therefore fill with the items in the array with 'x', that match the textbox.
If the checkbox is not ticked, all items matching the 3 characters typed in will fill the dropdownlist.

My array looks like this:

"Austria, Vienna", "AS", "x",
"South Africa, Johannesburg", "JHB"," ",

With x being the condition stated above (checkbox..)

I am completely new to Javascript, so any help would be appreciated.

:(
 
UPFRONT DISCLAIMER: The code below hasn't actually been tested, but should in principal work with a bit of tweaking here and there.

Ok, if I understand you correctly, you are essentially trying to emulate a multidimensional array, right? With every third value indicating the start of a new "row", right? You might try something as follows:

Assuming your tags are declared as follows:
Code: 
Dropdown list = <select id="ddlCities" />
Textbox = <input type="text" id="txtSearch" />
Button = <input type="button" id="btnSubmit" onclick="SearchCities();" />
Checkbox = <input type="checkbox" id="chkCheck" />
...you could try the following:
Code: 
var arrCities = { "Austria, Vienna", "AS", "x", "South Africa, Johannesburg", "JHB"," "}

function SearchCities()
{
    var txtbox = document.getElementById("txtSearch");
    var ddl = document.getElementById("ddlCities");
    var chk = document.getElementById("chkCheck");
    ddl.options.length = 0;

    for (var i = 0; i < arrCities.length; i += 3)
    {
        if (arrCities[i].indexOf(txtbox.value) >= 0 && (chk.checked ? arrCities[i + 2] == "x" : true))
        {
            var option = document.createElement("option");
            option.value = arrCities[i + 1];
            option.text = arrCities[i];
            ddl.options.add(option);
        }
    }
}

Hope I understood you correctly though... The request was a bit confusing. :confused:
 
Dankie FarligOpptreden, wardeer dit baie.
But no, a single dimensional array such as:

1st line (element): "Austria, Vienna", "AS", "x",
2nd line (2nd element): "South Africa, Johannesburg", "JHB"," ",
3rd line (3rd element): "Zimbabwe, Harare", "ZMB", "x",
Nth line (Nth element) "......, .......", "....",....(?)",

Apologies if my explanation is weird. I have been running to and fro all day (brain as well).

:o

If I type "AS" in the textbox, and I have the checkbox checked - it should return "Austria, Vienna" (or all cities and countries with code "AS", that have a "x" in the line..).

If I don't have the checkbox ticked, it should return all codes, countries with "AS".

:o

FarligOpptreden said:
UPFRONT DISCLAIMER: The code below hasn't actually been tested, but should in principal work with a bit of tweaking here and there.

Ok, if I understand you correctly, you are essentially trying to emulate a multidimensional array, right? With every third value indicating the start of a new "row", right? You might try something as follows:

Assuming your tags are declared as follows:
Code: 
Dropdown list = <select id="ddlCities" />
Textbox = <input type="text" id="txtSearch" />
Button = <input type="button" id="btnSubmit" onclick="SearchCities();" />
Checkbox = <input type="checkbox" id="chkCheck" />
...you could try the following:
Code: 
var arrCities = { "Austria, Vienna", "AS", "x", "South Africa, Johannesburg", "JHB"," "}

function SearchCities()
{
    var txtbox = document.getElementById("txtSearch");
    var ddl = document.getElementById("ddlCities");
    var chk = document.getElementById("chkCheck");
    ddl.options.length = 0;

    for (var i = 0; i < arrCities.length; i += 3)
    {
        if (arrCities[i].indexOf(txtbox.value) >= 0 && (chk.checked ? arrCities[i + 2] == "x" : true))
        {
            var option = document.createElement("option");
            option.value = arrCities[i + 1];
            option.text = arrCities[i];
            ddl.options.add(option);
        }
    }
}

Hope I understood you correctly though... The request was a bit confusing. :confused:
Click to expand...
 
Ok... makes sort of sense now. Are you working with a string array? If so, the items "Austria, Vienna", "AS" and "x" will all be treated as different strings and not a single string. A solution might be to pipe the different segments of each string item as follows:
"Austria, Vienna|AS|x"

Doing it that way, you can extract the different segments easily from the string. So, supposing you define it as such, you could try the following function:
Code: 
var arrCities = new Array("Austria, Vienna|AS|x", "South Africa, Johannesburg|JHB| ", "Zimbabwe, Harare|ZMB|x");
    
function SearchCities()
{
    var txt = document.getElementById("txtSearch");
    var chk = document.getElementById("chkChecked");
    var ddl = document.getElementById("ddlCities");
    
    if (txt.value.length > 0)
    {
        ddl.options.length = 0;
        for (var i = 0; i < arrCities.length; i++)
        {
            var code = arrCities[i].substring(arrCities[i].indexOf("|") + 1,arrCities[i].length).substring(0, arrCities[i].substring(arrCities[i].indexOf("|") + 1,arrCities[i].length).indexOf("|"));
            var city = arrCities[i].substring(0,arrCities[i].indexOf("|"));
            var checked = arrCities[i].substring(arrCities[i].length - 1, arrCities[i].length) == "x";
            if (code.toLowerCase().indexOf(txt.value.toLowerCase()) >= 0 && (chk.checked ? checked : true))
            {
                var option = document.createElement("option");
                option.value = code;
                option.text = city;
                ddl.options.add(option);
            }
        }
    }
}

I actually tested it (in FF) this time, so it should work. Just gimme a shout if you need more help! ;)

EDIT: I assume this is a follow-up to your "help with Excel" thread? :p
 
Last edited:
Thanks you FarligOpptreden,

My big problem is that I can't use a | as supposed to ","
I have 14000 lines of the array I posted, that needs to be searched for an "x" in it.

:(

FarligOpptreden said:
Ok... makes sort of sense now. Are you working with a string array? If so, the items "Austria, Vienna", "AS" and "x" will all be treated as different strings and not a single string. A solution might be to pipe the different segments of each string item as follows:
"Austria, Vienna|AS|x"

Doing it that way, you can extract the different segments easily from the string. So, supposing you define it as such, you could try the following function:
Code: 
var arrCities = new Array("Austria, Vienna|AS|x", "South Africa, Johannesburg|JHB| ", "Zimbabwe, Harare|ZMB|x");
    
function SearchCities()
{
    var txt = document.getElementById("txtSearch");
    var chk = document.getElementById("chkChecked");
    var ddl = document.getElementById("ddlCities");
    
    if (txt.value.length > 0)
    {
        ddl.options.length = 0;
        for (var i = 0; i < arrCities.length; i++)
        {
            var code = arrCities[i].substring(arrCities[i].indexOf("|") + 1,arrCities[i].length).substring(0, arrCities[i].substring(arrCities[i].indexOf("|") + 1,arrCities[i].length).indexOf("|"));
            var city = arrCities[i].substring(0,arrCities[i].indexOf("|"));
            var checked = arrCities[i].substring(arrCities[i].length - 1, arrCities[i].length) == "x";
            if (code.toLowerCase().indexOf(txt.value.toLowerCase()) >= 0 && (chk.checked ? checked : true))
            {
                var option = document.createElement("option");
                option.value = code;
                option.text = city;
                ddl.options.add(option);
            }
        }
    }
}

I actually tested it (in FF) this time, so it should work. Just gimme a shout if you need more help! ;)

EDIT: I assume this is a follow-up to your "help with Excel" thread? :p
Click to expand...
 
iDenTiTy, 14000 rows? Quickest way to bring your page to a grinding halt....

Is it not possible to introduce an AJAX query at this point? You could send an AJAX query to the server to only return the relevant array items - be a lot less code on the client side, and just as quick as querying 14000 items on the client...
 
I'm using Adobe Livecycle Designer 8.

I can't use libraries (I would've use Jquery, amongst others). It's embedding Javascript in a PDF.

:(

Raithlin said:
iDenTiTy, 14000 rows? Quickest way to bring your page to a grinding halt....

Is it not possible to introduce an AJAX query at this point? You could send an AJAX query to the server to only return the relevant array items - be a lot less code on the client side, and just as quick as querying 14000 items on the client...
Click to expand...
 
Then I'd be scouring the Adobe forums right now. I have no clue how well Adobe has implemented JavaScript, or if they have any proprietary extensions in use.
 
Can't you just alter that piece of JS and separate with just "," instead of "|"? Might cause a bit of trouble with the comma in the "Country, City" string though... Let us know if you need more help!

EDIT: So, you basically have one ginormous array, with 14000 * 3 string items in?! :eek:
 
I was emailed a giant excel spreadsheet with three columns and 14630 rows..

:(

Was told that t had to be like that. What they want.

:(

FarligOpptreden said:
Can't you just alter that piece of JS and separate with just "," instead of "|"? Might cause a bit of trouble with the comma in the "Country, City" string though... Let us know if you need more help!

EDIT: So, you basically have one ginormous array, with 14000 * 3 string items in?! :eek:
Click to expand...
 
iDenTiTy said:
I was emailed a giant excel spreadsheet with three columns and 14630 rows..

:(

Was told that t had to be like that. What they want.

:(
Click to expand...

Then just do it that way. If it's SLOW AS HELL you can just go "well I told you so"

:D
 
iDenTiTy said:
I was emailed a giant excel spreadsheet with three columns and 14630 rows..

:(

Was told that t had to be like that. What they want.

:(
Click to expand...


So, then just alter my JS sample to allow for commas instead of pipes. Problem solved! :D

EDIT: code modified for your sampling pleasure... Should work, ASSUMING the textbox, checkbox and dropdown lists are named accordingly.

Code: 
var arrCities = new Array("Austria, Vienna", "AS", "x", "South Africa, Johannesburg", "JHB" ," ", "Zimbabwe, Harare", "ZMB", "x");
    
function SearchCities()
{
    var txt = document.getElementById("txtSearch");
    var chk = document.getElementById("chkChecked");
    var ddl = document.getElementById("ddlCities");
    
    if (txt.value.length > 0)
    {
        ddl.options.length = 0;
        for (var i = 0; i < arrCities.length; i+=3)
        {
            var code = arrCities[i+1];
            var city = arrCities[i];
            var checked = arrCities[i+2] == "x";
            if (code.toLowerCase().indexOf(txt.value) >= 0 && (chk.checked ? checked : true))
            {
                var option = document.createElement("option");
                option.value = code;
                option.text = city;
                ddl.options.add(option);
            }
        }
    }
}
 
Last edited:
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X