Use variable to reference object property?

Question

I've got an object with a bunch of key's and values: (I've reduced it to one value for readability)

var linksarray = {
getting_Started : "Getting Started"
};

The aim is to go through a bunch of links on my page, manipulate the href attribute and dependent on the end result, i.e. getting_Started, use that as the key to get the value 'Getting Started' from the object.

To visualize:

Here is the code, comments of values as it's being manipulated:

var link = jQuery(this).attr('href');       //link = ../getting_Started.htm

var res = link.split('/'); 
var lastEl = res.pop();                     //link = getting_Started.htm

var testEl = firstEl.split('.'); 
var testElUse = testEl[0];                  //link = getting_Started

testElUse = '\'' + testElUse + '\'';        //link = 'getting_Started'

This all works as it should and I get the correct string that I'm looking for.

From here on I've used so many different solutions that I found on Google but none of them work. I've wasted one and a half days on this. Here is the two solutions that I expected to work...but don't.

Solution 1:

var stringJson = JSON.stringify(linksarray);

var obj=JSON.parse(stringJson) ;
alert(obj[testElUse]);                 //this results in 'undefined'

Solution 2:

alert(linksarray[testElUse]);          //this results in 'undefined'

I know there is dot and block annotation, but as far as I understand block is the way to go if you want to dynamically reference a property according to this link: Dynamically access object property using variable

No matter what I do, I get undefined returned...not the "Getting Started" that I'm looking for.

Please help :)

Answer 1

First of all it might be a lot easier and cleaner to extract the variable from the href attribute you are looking for using a regExp. Saves you a lot of popping and slicing (: http://www.regexr.com/ is a good site to tweak and test your regExp. Using a regExp it would look something like this:

var link = $('a');
var href = link.attr('href');

console.log(href); // http:www.google.com/getting_started.html

// .*/           - captures everything up to the last '/'
// (.*)          - captures everything in between the previous selection and 
//                 the next and puts in into a group.
// \.(html|htm)  - captures .html or .htm
var regExp = /.*\/(.*)\.(html|htm)/g;    

// replace the entire url with the value found in the first group selection.    
var testElUse = href.replace(regExp, '$1');

console.log(testElUse); // getting_started

Then you should be able to extract the value from your Object using the bracket notation:

// retrieve the value from the linksArray
console.log( linksArray[testElUse] ); // Getting started

Just make sure the names match (: Hope this helps.

Answer 2

The reason looks to be that 'getting_Started' !== 'getting_started' You defined the links_array property with a capital S on 'started'.

Sometimes its just the small things that catch us out. :)

Answer 3

It's because the variable and properties are different.

The property is getting_Started and testElUse = "\getting_started\";

That's why it is undefined

Answer 4

Remove this part of your parsing code

testElUse = '\'' + testElUse + '\'';

The extra apostrophe's mean you are looking for a property called 'getting_Started', not getting_Started (these are 2 different strings).

See this fiddle.