CODEWITHSUNDEEP
javascriptarrays
Wasteland
Wasteland

Reputation: 5379

JavaScript - display keys and values of an array

I'm playing with a module object and trying to create a sort of blog (it's not going to be used in real life - just me learning stuff). When a user fills a form and provides a tag, it checks whether the tag exists in an associative array, if not, it adds it with the value = 1. If the tag already exists, it adds +1 to the value. Now I want to display on a side how many entries for each tag there are, eg:

cooking(3) sport(1)

It seems to partially work as when I add another tag, it displays in but keeps increasing the count of ALL the categories/tags:

cooking(1) sport(1)

then

cooking(2) sport(2)

...not just the one the user has just added.

var myArticles = (function () {
    var s, articles;

    return {

        settings: {
            articleList: "articles", // div with generated articles
            articleClass: "article", // class of an article
            articleIndex: 0,
            sidebar: document.getElementById("sidebar"),
            tagList: {},
            // cats: Object.keys(this.settings.tagList)
        },

        init: function() {
            // kick things off
            s = this.settings;
            articles = document.getElementById(this.settings.articleList);
        this.createArticle();
        },

        createArticle: function() {
            var div = document.createElement("div");
        var getTag = document.getElementById("tag").value;
        var getTitle = document.getElementById("title").value;

        // Add classes
        div.classList.add(this.settings.articleClass, getTag);

        // Add title / content
        var title = document.createElement("h2");
        var textNode = document.createTextNode(getTitle);
        title.appendChild(textNode);
        div.appendChild(title);

        // Add category
        div.innerHTML += "Article" + this.settings.articleIndex;
            articles.appendChild(div);
            this.settings.articleIndex +=1;
        this.updateCategories(getTag);
        },

    updateCategories: function(tag) {
         // Create header
        this.settings.sidebar.innerHTML = "<h3>Categories</h3>";

        // Create keys and count them
        if (tag in this.settings.tagList) {
        this.settings.tagList[tag] += 1;
        } else {
        this.settings.tagList[tag] = 1;
        }

        var cats = Object.keys(this.settings.tagList);

        // Create an unordered list, assign a class to it and append to div="sidebar"
        var ul = document.createElement('ul');
        ul.classList.add("ul-bare");
        this.settings.sidebar.appendChild(ul);

        // iterate over the array and append each element as li
        for (var i=0; i<cats.length; i++){
        var li=document.createElement('li');
        ul.appendChild(li);
        li.innerHTML=cats[i] + "(" + this.settings.tagList[tag] + ")";
        }
    }
    };
}());

And HTML:

 <body>
    <div id="container">
    <h1>My articles</h1>
    <div id="genArticle" class="left">
      <form id="addArt" method="post">
    <div>
          <label for="title">Title</label>
          <input type="text" id="title" class="forma" placeholder="Title" required />
    </div>
    <div>
          <label for="tag">Tag</label>
          <input type="text" id="tag" class="forma" placeholder="Tag" required />
    </div>
    <div>
          <label for="art">Article</label>
          <textarea id="art" class="forma" required /></textarea>
    </div>
    <input type="button" onclick="myArticles.init()" value="Add Art">
    <input type="reset" value="Reset Form">
    <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">
      </form>
      <div id="articles"></div>

    </div> <!-- end of genArticle -->
    <aside id="sidebar" class="right">
    </aside>
    </div> <!-- end of container -->



  <script src="js/script.js"></script>
  </body>

Upvotes: 0

Views: 54

Answers (1)

Logar314159
Logar314159

Reputation: 503

I think this line is wrong

li.innerHTML=cats[i] + "(" + this.settings.tagList[tag] + ")";

It is this.settings.tagList[cats[i]]

Not this.settings.tagList[tag]

Upvotes: 2

Related Questions