For loop repeats each loop onto the next

Question

I am trying to dynamically adjust the document.getElementById(divID) by using a loop. This seems to work...sorta

It keeps looping as you will see in the screenshot below.

let searchresult = function(response) {
    let output ="";
    for (let j = 0; j < response.length; j++) {
        let divID = response[j].resortcode + 'results';
        let container = document.getElementById(divID);

        output +=
            `
            <div class="${response[j].resortcode} ${response[j].roomcode}">
            </div>
            `;
        console.log(container);
        $(container).html(output);
    }
};

I have my container div set to the response[j].resortcode but I thought by using document.getElementById(divID) that it would only allow that resort code inside of a div with a corresponding resortcode Notice it is also looping the getElementByID more than once.

I would like the output going to a premade div id in my html file (which it does, it just keeps repeating). Then loop the results <div class=${response[j].resortcode}"></div> into the corresponding premade div. Here is a photoshopped version of the desired result:

EDIT: Adding console of original response.

Any help is greatly appreciated.

Samathingamajig · Accepted Answer · 2021-06-10T04:19:56.370

2

Your variable output is added upon every iteration and never reset, so when you set the html to output, it contains every previous iteration.

You can fix this by getting the innerHTML and adding onto instead of having an output variable.

You can also store the resortcode into a Set (a special kind of array that does not allow duplication of elements) and then console.log out those containers at the end.

let searchresult = function(response) {
    let resortCodes = new Set();
    for (let j = 0; j < response.length; j++) {
        resortCodes.add(response[j].resortcode); // add only happens if the resortcode isn't already in resortCodes
        let divID = response[j].resortcode + 'results';
        let container = document.getElementById(divID);

        container.innerHTML += `
            <div class="${response[j].resortcode}">
            <div class="roominfo"><p class="roomtitle"> ${response[j].roomname} - ${response[j].viewname}</p>
            </div>
            </div>
            `;
    }

    resortCodes.forEach(function (resortCode) {
        console.log(document.getElementById(resortCode + "results"));
    };
};

edited Jun 10 '21 at 04:19

answered Jun 10 '21 at 02:39

Samathingamajig

11,839
3
12
34

I tried this, but it stops each room within the resort loop. I have edited my question in hopes to clarify things. But, when I move output within my for loop, it only grabs 1 room at each resort and just loops through that. – Bunsen Honeydew Jun 10 '21 at 03:17
@BunsenHoneydew After rereading your question, I think I found what you want. Editing my answer right now (might take a while) – Samathingamajig Jun 10 '21 at 03:58
@BunsenHoneydew I'm done now, please check the modified answer – Samathingamajig Jun 10 '21 at 04:07
I may be overlooking something, but it isn't outputting anything. In the console log, nor within my html. Your description sounds like that would do it though. – Bunsen Honeydew Jun 10 '21 at 04:14
Did you refresh or whatever you would need to do to reset everything (including replacing the old function with this new function)? Try adding a `console.log("start")` and `console.log("end")` at the beginning and end of the function, as well as `console.log(i, response[j].resortcode)` inside of the first `for` loop and see what happens. – Samathingamajig Jun 10 '21 at 04:17
I fixed the code inside the `forEach` function, I forgot to add `"results"` to the end of the `resortCode`,,, but that shouldn't have effected the modifcation to the html itself – Samathingamajig Jun 10 '21 at 04:20
Yes, anything beyond ``` for (let j = 0; j < response.length; j++) {``` will not output to the console. If I place ```console.log``` before that line then ```console.log(response``` works. – Bunsen Honeydew Jun 10 '21 at 04:21
Can you see what happens when you `console.log(response.length)` before the loop? If it's 0 or undefined or something like that, that could be the problem. – Samathingamajig Jun 10 '21 at 04:24
undefined is what it returns. – Bunsen Honeydew Jun 10 '21 at 04:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233589/discussion-between-samathingamajig-and-bunsen-honeydew). – Samathingamajig Jun 10 '21 at 04:27
I ran into an issue: because we removed ```containter = "";``` the result no longer clear each time I hit the search button. Where could I add this to clear my previous results on each request? Currently, it is just adding more divs to the bottom of the already searched div results. @Samathingamajig – Bunsen Honeydew Jun 10 '21 at 15:41
1

To clear all the results containers, you first need to change something: Change the format from `RESCODEresults` to `results-RESCODE` (`SSRresults` to `results-SSR`). That way, you can use a special selector to select every div that has a class that starts with `results-`, `div[class^="results-"], div[class*=" results-"]`. **You also have to change some of the code in my answer to change to the new format**. You can then make a function that clears all of the results containers. See http://jsfiddle.net/msqgejra/ for an example. (Based off of https://stackoverflow.com/a/5110337/12101554) – Samathingamajig Jun 10 '21 at 18:20
1

I got it! I attached the ```onclick="clearAllResults"``` to my search button that triggers my ajax request. That seems to be working... Thank you again, you are a lifesaver. – Bunsen Honeydew Jun 10 '21 at 19:38

For loop repeats each loop onto the next

1 Answers1