Javascript Create Array of Category Hyperlinks

Question

I have an array of sports items. I am trying to build an array of category names from the main array. Each category name is then created as a hyperlink element which onclick triggers a function that loads the associated products. I also need to display one instance of the category name as there are multiple.

When I click the button and call filterCategory(), nothing is getting displayed. The error I am getting in Chrome Developer Tools is when I call:

document.getElementById("brand-category").appendChild(categoriesLink);

... the error on this line is:

failed to execute appendChild on 'Node': paramater 1 is not type Node

Here is what I have tried so far:

var data = {
"Nike": [
    {
    "id": "1",
    "brand":"Nike",
    "productTitle": "Black Hoody",
    "productImage": "image.jpg",
    "category": "Hoodies",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "2",
    "brand":"Nike",
    "productTitle": "Running Jacket",
    "productImage": "image.jpg",
    "category": "Jackets",
    "priceBand": "1104", 
    "salePrice": "150.00"}
],

"Sketchers": [
    {
    "id": "3",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 1",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "4",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 2",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1102", 
    "salePrice": "90.00"}

]}  

function filterCategory() {
//build an array of unique category names from the main array.  
//create an element and assign the category name as a link
//on click, load the associated products from that category

var categories, categoriesLink;

for(categories in data) {
    categoriesLink = document.createElement("a");
    categoriesLink.innerHTML = categories;
    categoriesLink.categories_Arr=data[categories];
        categoriesLink = function() {
            var catsContainer=document.getElementById('brand-category');
            var categories_Arr=this.categories_Arr, i, I=categories_Arr.length, item;
            var catOutput="";
            for(i=0; i<I; I++) 
            {
                item=categories_Arr[i];
                 catOutput+= "<img src=\""+item.logo+"\"/>" +  item.id + item.productTitle + item.productDescription + "<img src=\""+item.productImage+"\"/>" + item.rrp + item.salePrice + "<br>";
             }

            catsContainer.innerHTML=catOutput;
            catsContainer.style.display="block";
            return false;
        }

        document.getElementById("brand-category").appendChild(categoriesLink);
    }
}

<div id='cat'><button id='filterCategory' name='filterCategory' value='Category' onclick="filterCategory();">Category</button></div>


<div id="brand-category"></div>

Any help much appreciated.

Cheers

You assign categoriesLink with a function, probably you meant to assign it as an eventhandler? — Icepickle
– Icepickle, Commented Jul 14, 2017 at 13:16
if I change the name, the categories display but not as links? — Hexana
– Hexana, Commented Jul 14, 2017 at 13:37

sumit chauhan · Accepted Answer · 2017-07-14 17:16:11Z

1

"categoriesLink = function()" , you trying to append function on your html. That's why is throwing error "parameter 1 is not of node type" either you can change the function name or if you want you can use append to show whole function which is not good. see below snippet

var data = {
"Nike": [
    {
    "id": "1",
    "brand":"Nike",
    "productTitle": "Black Hoody",
    "productImage": "image.jpg",
    "category": "Hoodies",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "2",
    "brand":"Nike",
    "productTitle": "Running Jacket",
    "productImage": "image.jpg",
    "category": "Jackets",
    "priceBand": "1104", 
    "salePrice": "150.00"}
],

"Sketchers": [
    {
    "id": "3",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 1",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "4",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 2",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1102", 
    "salePrice": "90.00"}

]}  

function filterCategory() {
//build an array of unique category names from the main array.  
//create an element and assign the category name as a link
//on click, load the associated products from that category

var categories, categoriesLink;

for(categories in data) {
    categoriesLink = document.createElement("a");
    categoriesLink.innerHTML = categories;
    categoriesLink.setAttribute('href', '');
    categoriesLink.categories_Arr=data[categories];
        var categoriesLinks = function() {
            var catsContainer=document.getElementById('brand-category');
            var categories_Arr=this.categories_Arr, i, I=categories_Arr.length, item;
            var catOutput="";
            for(i=0; i<I; I++) 
            {
                item=categoreis_Arr[i];
                 catOutput+= "<img src=\""+item.logo+"\"/>" +  item.id + item.productTitle + item.productDescription + "<img src=\""+item.productImage+"\"/>" + item.rrp + item.salePrice + "<br>";
             }

            catsContainer.innerHTML=catOutput;
            catsContainer.style.display="block";
            return false;
        }

        document.getElementById("brand-category").appendChild(categoriesLink);
    }
}

<div id='cat'><button id='filterCategory' name='filterCategory' value='Category' onclick="filterCategory();">Category</button></div>


<div id="brand-category"></div>

Answer to your side question is what you doing is, in your for each loop you extract the key from object and assign it to innerHTML. So instead of doing categoriesLink.innerHTML = categories; you should do something like that : categoriesLink.innerHTML = data[categories]["0"].category;

edited Jul 14, 2017 at 17:16

answered Jul 14, 2017 at 13:22

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

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

8 Comments

Hexana Over a year ago

Thanks sumit. This seem to solve the problem but the categories are not getting displayed as hyperlinks, which onclick is meant to load the associated products?

sumit chauhan Over a year ago

Coz you need to set href attribute for the <a>

Hexana Over a year ago

Yip that does it. I also noticed a couple of other things. Call categoriesLink.onclick = function() AND my for loop has I++ instead of i++. Thanks for your help there sumit. Plus one from me :)

sumit chauhan Over a year ago

thanx, glad to help you.

Hexana Over a year ago

sumit, I do really appreciate your help but I've uncovered another question. Can you think of why the brand names are getting displayed instead of the category name ie "category: "Running Shoes." Just a side question if you notice anything I've missed?

|

Collectives™ on Stack Overflow

Javascript Create Array of Category Hyperlinks

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related