forEach trøbbel javascript

abooAyoob · 23. februar 2016

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forEach</title>
  <script src="jQuery.js" charset="utf-8"></script>
</head>
<body>
  <div id="main">
  </div>
  <div id="main2">
  </div>

<script>
var HTMLprojectStart = '<div class="project-entry"><hr></div>';
var HTMLprojectTitle = '<a href="#">%data%</a>&nbsp';

var array = ["what's", "going", "on"];
array.forEach(
  function(e, i, a) {
    var word;
      word = HTMLprojectTitle.replace("%data%", e);
      $("#main").append(HTMLprojectStart);
      $(".project-entry").append(word);

      console.log(e);
  }
);


var projects = {
    "projects":
    [{"title": "Online portfolio"},
      {"title": "Ayoob"},
      {"title": "Test"}]
};

projects.display = function() {
  var title, dates, description, image;
    this.projects.forEach(
      function(project, i, array) {

        title = HTMLprojectTitle.replace("%data%", project.title);

        $("#main2").append(HTMLprojectStart);
        $(".project-entry").append(title);
        console.log(title);
      }
    );
};
projects.display();

</script>
</body>
</html>

Can somebody explain to me why the page is not looking more like the output in the console?
From what I gather, this has something to do with closures, am I right?
But it still does not make sense to me, because y is the whole appending statement repeating itself just because the variable "word" or "title" is being held alive? Should not ONLY the last item in each array show up 3 times each? Why are the 2 functions even linked at all?
I'm beginning to feel like this has nothing to do with closures, but then I don't have any clue what's going on...

ps. I know I can solve the problem using a regular for loop, but I just wish to understand what is going on.

Hope it is all right that I wrote this in english, your more than welcome to reply in Norwegian! : -)

geir__hk · 23. februar 2016

Cannot remember that it had been allowed to define a function inside a loop. I guess that's why you can't get it to work properly.

I haven't got very much experience using javascript, so I might be wrong (it's like fourtheen years ago I was eager to learn javascript, and thing have changed since then).

Altså - jeg tror ikke at funksjonen inne i for-løkka er lovlig. Korriger meg gjerne om jeg tar helt feil her.

etse · 23. februar 2016

$(".project-entry").append(word);

this code select EVERY element with the project-entry class and appends the word to it. This means, that as you add more project-entires it will select both the new one and all the old ones.

So what happens is:

First iteration:

- Creates a new element

- Selects the new element

- Adds the word "What's" to it

2nd iteration

- Creates a new element

- Selects the new and previous element

- Adds the word "going" to both of the elements

3rd iteration

- Creates a new element

- Selects the new and both the old elements

- Adds the word "on" to all 3 of them

.... and so on.

------------

Working example: Working example: https://jsfiddle.net/zx6ovxtv/1/

I create a new jQuery-element in each iteration, and append the word/title to it before I add it to the DOM. That way I don't need to search for it in the DOM with jQuery.

Endret 23. februar 2016 av etse

Logg inn

forEach trøbbel javascript

Anbefalte innlegg

abooAyoob

Lenke til kommentar

Videoannonse

geir__hk

Lenke til kommentar

etse

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer