javascript path + "." + key doesn't work

Question

Hi I am trying to make a program where it shows the different keys of an object, and depending on which keys you want it goes deeper into the object.

What I have right now is a function that reads the keys of an object and makes buttons with these keys as value. What I want is for people to be able to press the button and then seeing the keys available in the key they pressed. (since it is a layered object)

Here is my HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Root folder</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div id="buttons"></div>    

<script src="js/init.js" type="text/javascript"></script>
</body>
</html>

And here is my Object:

var vloer = {
"Linoleum": {
    "Licht vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 1
            },
            "Strippen": {
                "value": 2
            },
            "Glans": {
                "value": 3
            },
            "Hoogglans": {
                "value": 4
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 5
            },
            "Strippen": {
                "value": 6
            },
            "Glans": {
                "value": 7
            },
            "Hoogglans": {
                "value": 8
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 9
            },
            "Strippen": {
                "value": 10
            },
            "Glans": {
                "value": 11
            },
            "Hoogglans": {
                "value": 12
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 13
            },
            "Strippen": {
                "value": 14
            },
            "Glans": {
                "value": 15
            },
            "Hoogglans": {
                "value": 16
            }
        }
    },
    "Zwaar vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 17
            },
            "Strippen": {
                "value": 18
            },
            "Glans": {
                "value": 19
            },
            "Hoogglans": {
                "value": 20
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 21
            },
            "Strippen": {
                "value": 22
            },
            "Glans": {
                "value": 23
            },
            "Hoogglans": {
                "value": 24
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 25
            },
            "Strippen": {
                "value": 26
            },
            "Glans": {
                "value": 27
            },
            "Hoogglans": {
                "value": 28
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 29
            },
            "Strippen": {
                "value": 30
            },
            "Glans": {
                "value": 31
            },
            "Hoogglans": {
                "value": 32
            }
        }
    },
    "Schoon": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 33
            },
            "Strippen": {
                "value": 34
            },
            "Glans": {
                "value": 35
            },
            "Hoogglans": {
                "value": 36
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 37
            },
            "Strippen": {
                "value": 38
            },
            "Glans": {
                "value": 39
            },
            "Hoogglans": {
                "value": 40
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 41
            },
            "Strippen": {
                "value": 42
            },
            "Glans": {
                "value": 43
            },
            "Hoogglans": {
                "value": 44
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 45
            },
            "Strippen": {
                "value": 46
            },
            "Glans": {
                "value": 47
            },
            "Hoogglans": {
                "value": 48
            }
        }
    }
},
"PVC": {
    "Licht vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 1
            },
            "Strippen": {
                "value": 2
            },
            "Glans": {
                "value": 3
            },
            "Hoogglans": {
                "value": 4
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 5
            },
            "Strippen": {
                "value": 6
            },
            "Glans": {
                "value": 7
            },
            "Hoogglans": {
                "value": 8
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 9
            },
            "Strippen": {
                "value": 10
            },
            "Glans": {
                "value": 11
            },
            "Hoogglans": {
                "value": 12
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 13
            },
            "Strippen": {
                "value": 14
            },
            "Glans": {
                "value": 15
            },
            "Hoogglans": {
                "value": 16
            }
        }
    },
    "Zwaar vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 17
            },
            "Strippen": {
                "value": 18
            },
            "Glans": {
                "value": 19
            },
            "Hoogglans": {
                "value": 20
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 21
            },
            "Strippen": {
                "value": 22
            },
            "Glans": {
                "value": 23
            },
            "Hoogglans": {
                "value": 24
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 25
            },
            "Strippen": {
                "value": 26
            },
            "Glans": {
                "value": 27
            },
            "Hoogglans": {
                "value": 28
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 29
            },
            "Strippen": {
                "value": 30
            },
            "Glans": {
                "value": 31
            },
            "Hoogglans": {
                "value": 32
            }
        }
    },
    "Schoon": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 33
            },
            "Strippen": {
                "value": 34
            },
            "Glans": {
                "value": 35
            },
            "Hoogglans": {
                "value": 36
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 37
            },
            "Strippen": {
                "value": 38
            },
            "Glans": {
                "value": 39
            },
            "Hoogglans": {
                "value": 40
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 41
            },
            "Strippen": {
                "value": 42
            },
            "Glans": {
                "value": 43
            },
            "Hoogglans": {
                "value": 44
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 45
            },
            "Strippen": {
                "value": 46
            },
            "Glans": {
                "value": 47
            },
            "Hoogglans": {
                "value": 48
            }
        }
    }
}
};

And here is my Javascript:

var div = document.getElementById("buttons"),
path = vloer;

function floorApp(key) {

    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    if(key !== vloer){
        return path = path + "." + key;   
    }

    console.log(path.Linoleum)

    var keys = Object.keys(path);

    for (var i=0; i<keys.length; i++) {

        var btn = document.createElement("button");
        btn.setAttribute("class", "btn");
        btn.setAttribute("onclick", "floorApp(" + keys[i] + ")");
        btn.innerHTML = keys[i];  

        div.appendChild(btn);
    }
}

However this code always results in the following error: Uncaught ReferenceError: Linoleum is not defined

Or it gives an [object Object]Linoleum which does not give me the keys in vloer["Linoleum"] but the numers 1 to 22.

Thank you so much to anyone that helps me!

Here is the answer to my question for everyone that runs into the same problem as I did:

var div = document.getElementById("buttons"),
path = vloer;

function floorApp(key) {

    console.log(path, key);

    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    if(key !== vloer){
        path = path[key];
        console.log(path);
    }

    var keys = Object.keys(path);

    for (var i=0; i<keys.length; i++) {

        var btn = document.createElement("button");
        btn.setAttribute("class", "btn");
        btn.setAttribute("onclick", "floorApp(" + JSON.stringify(keys[i]) + ")");
        btn.innerHTML = keys[i];  

        div.appendChild(btn);
    }
}

floorApp(vloer);

More than a duplicate wondering about dot vs brackets access to a property, I saw this as an error in trying to access a property the wrong way at all. (regardless, the marking works for me) — Attersson, May 14 '18 at 08:10
It is not a duplicate since if the problem I am having was as simple as dot vs. bracket acces to property than I would not have asked the question. I constantly get the following error: Uncaught ReferenceError: Linoleum is not defined which I cannot explain but apparently I am calling the object the wrong way — MAXaddictable, May 14 '18 at 08:47

score 0 · Answer 1 · answered May 14 '18 at 08:02

0

Turn return path = path + "." + key; into return path = path.key; or return path = path[key];

The first does string concatenation, but path is an Object and you should have a toString. Anyway this is not what you want. The second and third correctly access to the property of the parent object if it exists (else they return undefined).

answered May 14 '18 at 08:02

Attersson

4,612
1
14
28

I have tried this but I will get the following error: – MAXaddictable May 14 '18 at 08:44
Uncaught ReferenceError: Linoleum is not defined – MAXaddictable May 14 '18 at 08:45
You have to console.log and see what is path, vloer, key – Attersson May 14 '18 at 08:46
Thats the problem, it won't console.log. because of the error – MAXaddictable May 14 '18 at 08:52
Of course, log before the problem, in order to intercept what the variables values are – Attersson May 14 '18 at 08:55
I console.log at the start of the function but apparently using the Linoleum as value gives problems. Because even at the start of the function it wont console.log. I dont get this issue either since the first thing using the path is the Object.keys function and I console log way before that so why it isn't console logging is a mysterie to me – MAXaddictable May 14 '18 at 09:00
Does it console.log wrong or not at all? If it won't console.log at all, then it means that code is not reached and executed... – Attersson May 14 '18 at 09:02
Atterson YOU ARE AMAZING! I somehow got it working XD – MAXaddictable May 14 '18 at 09:05
Javascript is amazing :) I am glad you got it working! – Attersson May 14 '18 at 09:06

javascript path + "." + key doesn't work

1 Answers1