JS function not running whole script

Question

this part of my JS

  var records=response.split('|');
  for (i=1; i<records.length; i++) {
    var record=records[i].split('*');
    var region=record[0];
    var regionid=record[1];
    var x=document.createElement('option');
    x.text=region;
   list.options.add(x);
   }

when it gets to the for loop, it never runs the stuff between { }

records is

0: "<option value='Bobs Dock'>Bobs Dock</option><option value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option>"
length: 1

response is

"<option value='Bobs Dock'>Bobs Dock</option><option value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option>"

so why does it not run the items between { }?

EDIT********

when changed to 0 so it does run, it will now make the drop box option say

<option>
      "<option value='Bobs Dock'>Bobs Dock</option><option value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option>"
</option>

What instead it should do is break each of the options into there own option for the drop down box.

That's the problem; 1 is equal to 1, not less than it. Your loop will never execute. You may want to set i to 0, or the < to =... or just remove the condition entirely if it will always be met. — Obsidian Age
– Obsidian Age, Commented Oct 10, 2018 at 22:35
then the loop will not run since i = 1 is never less than 1 .... you should start with i = 0 — HaukurHaf
– HaukurHaf, Commented Oct 10, 2018 at 22:36
try change i<records.length to i<=records.length to include the equal — Sigma
– Sigma, Commented Oct 10, 2018 at 22:36
that works, but then my drop box now just says [code]<option value='Bobs Dock'>Bobs Dock</option><option value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option>[/code] — user41758
– user41758, Commented Oct 10, 2018 at 22:37

Luke Nysen · Accepted Answer · 2018-10-11 00:07:44Z

1

Your split function is returning an array of size 1 because it is not finding a pipe '|' in your string. Meanwhile, Javascript array indexes are zero based, so the first and only item is record[0]. Since your loop only starts looping on the second or higher record due to the "i=1;" initializer, it never runs because "i<records.length;" is false from the get go.

I think there's two bugs here:

1) Initialize your for loop at zero (ie, "i=0;")

2) You probably need to split on a different pattern since there are no pipes in your string. Maybe try:

var valueRegEx = /value='([^']+)'/;  // find the contents of the value attribute
var textRegEx = />([^<]*)/;  // find the text of the option

var records=response.split('</option><option ');
for (i=0; i<records.length; i++) {
  var option = record[i];
  var value = valueRegEx.exec(option)[1]
  var text = textRegEx.exec(option)[1]

  // ...
  // Not sure what you're trying to do at this part,
  // but the above hopefully answers your question 
  // ...

  var x=document.createElement('option');
  x.text=region;
  list.options.add(x);
}

Another way to retrieve all the values from the response string is just to let a regular expression parse out the whole thing:

var regex = /(?<=value=['"])[^'"]*/g;

var arrayOfValues = response.match(regex);
// arrayOfValues = ['Bobs Dock', 'Johns Dock', 'Mikes Dock']

edited Oct 11, 2018 at 0:07

answered Oct 10, 2018 at 22:51

Luke Nysen

565 bronze badges

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

1 Comment

user41758 Over a year ago

what you said made me re-think. Why not just supply the values i needed separate by | So while i did not go this route (cause i was able to change the response i needed) this way did work.

Barmar · Accepted Answer · 2018-10-11 00:13:38Z

0

Your code appears to be designed for a completely different format of response, e.g.

Bobs Doc*1|Johns Dock*2|Mikes Dock*3

But your actual response is just the HTML for the options, so you don't need to construct the HTML in your own loop. You can simply add it to the HTML of the <select>:

list.innerHTML += response;

answered Oct 11, 2018 at 0:13

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

Hari · Accepted Answer · 2018-10-11 17:08:57Z

As the above answer explained, there is a bug on the loop. Start at 0 for i, but this answer is mainly focusing on the remaining part.

A slightly different take on the same problem. Instead of splitting using regex or other separators, I'm making it a proper HTML and then get the options as an HTMLCollection.

JSFiddle - https://jsfiddle.net/hari7190/mbugyz24/

var response = "<option value='Bobs Dock'>Bobs Dock</option><option value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option><option value='Mayur Dock'>Mayur Dock</option><option value='Foo Dock'>Foo Dock</option>"

parser = new DOMParser();
doc = parser.parseFromString("<select>" + response + "</select>", "text/html");
var options = doc.getElementsByTagName("option");

for(i=0; i<options.length; i++){
    var x=document.createElement('option');
    x.text = options[i].text;
    x.value= options[i].value
    document.getElementById("list").append(x);
}

Collectives™ on Stack Overflow

JS function not running whole script

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related