Why am I only able to get the first part of my Array?

Question

Edit: My original question was too vague and contained too many sub-questions. I've edited the original out to focus on a more direct question.

I'm loading a list of names into an empty array in my jquery code via AJAX. I can get the first in the list to show up, but nothing after that appears. I ran a test to where only the first two names should appear on my screen, but I'm not getting anything after the first one, and Firefox isn't showing me any errors. I'd really appreciate any help.

.html Code:

<form id="memberNames">
  <label>Member #:</label>
  <select class="idNum">
  </select>
  <label>Member Name:</label>
  <span class="idName" num="0"></span>
  <label>Member #:</label>
  <select class="idNum">
  </select>
  <label>Member Name:</label>
  <span class="idName" num="1"></span>

.js Code:

  var memList = new Array ();

  // This code produces the Member #'s in the select tag
  for (var i = 200; i <= 299; i++) {
    $(".idNum").append("<option>" + i + "</option>");
    }

  $.ajax({
    mimeType: 'text/plain; charset=x-user-defined',
    url:"memName.txt",
    type: "GET",
    dataType: "text",
    success: function (data) {
      memList = data.split("\n");
      for (var m = 0; m <= memList.length; m++) {
        return $('.idName[num="' + m + '"]').html('<input type="text" name="memberName" value=' + memList[m] + '>');
        }
      }
    });

.txt File:

---
John D.
Jane D.
James B.
Mickey M.
etc...

If only the name is editable, putting the number in the editable field is slightly awkward. As far as the endpoint return the html, imho, it would be better to return the data as json, and build the page from that json. Then your update logic is simply updating that json file. But as this question stands, it is overly broad. — Taplar, May 09 '18 at 17:39
Welcome to StackOverflow. It seems you really have several questions packed into one: 1) How to manage editable data on a page, 2) How to make AJAX requests to update and retrieve data, 3) How to effectively store data, and 4) How to build a tool that is compatible with major browsers. You may want to consider doing a little more research on your own and then submit more specific, targeted questions that are likely to have a single, correct answer. — vastlysuperiorman, May 09 '18 at 17:42
Asking guidelines can be found here: https://stackoverflow.com/help/how-to-ask — vastlysuperiorman, May 09 '18 at 17:43
@vastlysuperiorman - Thanks for the guidance. This may be why I've been having problems thinking about this issue so much; it's too many things at one time. I'll come back when I have a more direct question. — Clay Barnard, May 09 '18 at 20:42

score 0 · Answer 1 · answered May 10 '18 at 03:41

0

I think you have a few issues, but it's a little difficult to test on the fly, so forgive me if this isn't 100% accurate; hopefully it'll put you on the right path.

First, you're splitting on a character literal of "\n" meaning it's looking for \n in your text. If you want it to find \n, your text file should look like John D.\nJane D.\nJames B.\nMickey M.. If you want it to find a new line character, on the other hand, you should split on the regex of /\n/ (see this Q&A).

Next, it may also be an issue with the fact that you're initializing your memList variable outside of your AJAX function (see this A from the same Q).

I recommend trying one solution, then the other, and if neither works on its own, maybe try both together.

Worst case scenario, you can use a breakpoint in your code in the success function (if you're using Chrome, you can type debugger; on any line and it'll automatically create a breakpoint in your code when it reaches that line). Then you can use the 'console' to play with your returned value data to see what you got back from your call and experiment with slicing it into an array.

Good luck!

answered May 10 '18 at 03:41

Bmd

1,308
8
15

I tried it in the order you mentioned: first with then regex, then moving the variable, then both. Moving the variable seems to not matter at all, then console turns out the same both ways. However, the regex changes the outcome; instead of getting `value="---" for the first span, I end up with all of the names from the list following the "---". I also tried declaring "\n" within the text file, to see if that would help it, but it actually just strung it all together in one line, so it looks like that the .split("\n") is working. I really appreciate your help @Bmd! – Clay Barnard May 10 '18 at 04:36
If you write `console.log(data);` at the beginning of your success function, what does it return? Also, just for the sake of exploring all possibilities, if you own the .txt file too (which it seems like you do), why don’t you try doing a more basic text string like `a,b,c` to see if you can get that to work (splitting on `,`). (Here’s a W3Schools link https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_split ) – Bmd May 10 '18 at 04:43
Okay, so I did a `console.log` where you said, and it does prints to the console the list exactly as it appears in the .txt file. I also ran a test to see what would happen if I logged it after my `.split`, and this picture https://image.ibb.co/hviNOy/consolelog2.png is what I get from that. I'm not sure where the `\r` is coming from, or if it's the problem. The W3 article was helpful for sure. I tried the `.split` test again by adding a character to the end of every line, but it turns up the same. I really do appreciate the help here. You've been really great! – Clay Barnard May 10 '18 at 16:21
1

Just tried something else. I wanted to see what happened if I changed my code from `.split("\n")` to this: `.split("\r\n")` since that "r" is coming from somewhere. It does take that out as well, I just want to make sure that doing so won't mess up anything else later. It still didn't allow the jquery to add the html code that I want to add for each iteration of the `for` loop, but it did make the array display correctly as `["a", "b", "c", "d", etc]`. – Clay Barnard May 10 '18 at 20:48
Excellent, so if you got the correct array, now we just need to manipulate the data. Can you reply with the *exact* output you want? (Eg ``) – Bmd May 10 '18 at 20:58

score 0 · Accepted Answer · answered May 10 '18 at 21:01

I just accidentally fixed it while messing around!

In my original code, I had this:

for (var m = 0; m <= memList.length; m++) {
  return $('.idName[num="' + m + '"]').html('<input type="text" name="memberName" value=' + memList[m] + '>');
  }

Turns out, the return didn't need to be there, and the second parameter of the loop needed to be less than without the possibility of being equal to the length. So the code that now works is this:

for (var m = 0; m < memList.length; m++) {
  $('.idName[num="' + m + '"]').html('<input type="text" name="memberName" value=' + memList[m] + '>');
  }

Why am I only able to get the first part of my Array?

2 Answers2