Javascript / Jquery - How to set a variable name based on a variable

Question

This has been asked a bunch of times before but I'm not grasping it.

In the following..

var variableName = "hello";

How do I make the variable name 'variableName' based on another variable?

PHP Example

$a = 'hello';
$$a = 'hi'; // same as $hello..
echo $hello; // and $hello outputs 'hi'

I specifically need this variable variable to be used for localstorage so it may be syntax that I'm having a problem with.

What I'm Using It For (you can probbaly skip to This Seems To Work)

I want to generate a unique variable name for storing information in local storage. Variable name will be based on the post id of the wordpress post/page which I retrieve with php.

For example we will say the post id is 3333

I add the letters id to the beginning of each post id

So now I have id3333

var postIdNumber = 'id3333';

Then I get 3 other pieces of information that I want to store into local storage about this post (for simplicity I have shown an example output, not the code to get it)

var postURL = 'website.comm/a-wp-post/';
var postTitle = 'A Wordpress Post';
var postThumb = 'website.comm/images/thumb3333.jpg';

Now I want to store this information into local storage

var lsTest = { 'lsURL': postURL, 'lsTitle': postTitle, 'lsThumb': postThumb };
localStorage.setItem('lsTest', JSON.stringify(lsTest));

That works fine. Except that I want to be able to store multiple posts into local storage to retrieve later from a 'my favourite posts' page.

So I need a dynamic variable name.

For post ID 3333 I need the variable currently named lsTest to be named id3333
For post ID 4444 I need the variable currently named lsTest to be named id4444

This seems to work (Though I dont fully comprehend it) solution modified from https://stackoverflow.com/a/5187652/3377049

var variableVariable = {}
variableVariable.postNumber = 'id3333';
var vv = 'postNumber';
jQuery('.test-div').text(variableVariable[vv]); // outputs id3333

While this does not..

var variableVariable = {} // also, should this have a ';' ?
variableVariable.postNumber = 'id3333';
var vv = 'postNumber';
var variableVariable[vv] = { 'lsURL': postURL, 'lsTitle': postTitle, 'lsThumb': postThumb };
localStorage.setItem('variableVariable[vv]', JSON.stringify(variableVariable[vv]));

In PHP I could maybe do something like this.. (for examples sake i'm mixing php variables into JS)

$uv = 'id3333';
$$uv = { 'lsURL': postURL, 'lsTitle': postTitle, 'lsThumb': postThumb };
localStorage.setItem('$$uv', JSON.stringify($$uv));

Similar question about variable variables specifically stackoverflow.com/questions/3723199 and another about combining variable names stackoverflow.com/questions/25202945 — Hastig Zusammenstellen
– Hastig Zusammenstellen, Commented Jun 25, 2017 at 11:53

inorganik · Accepted Answer · 2016-07-20 23:35:28Z

2

You just need to create an object of objects, keyed off of the unique post id. But then you need to stringify the object before storing it, and parse it when retrieving it.

        function saveObject(key, object) {
            object = JSON.stringify(object);
            window.localStorage.setItem(key, object);
        }
        function getSavedObject(key) {
            var saved = window.localStorage.getItem(key);

            if (saved) {
                return JSON.parse(saved);
            } else {
                return null;
            }
        }

your object:

var lsTest = {
    id3333: {
        postUrl: postUrl1,
        postTitle: postTitle1,
        postThumb: postThumb1,
    },
    id4444: {
        postUrl: postUrl2,
        postTitle: postTitle2,
        postThumb: postThumb2,
    }
}

store it:

saveObject('myUniqueSiteName', lsTest);

retrieve it:

var lsTest = getSavedObject('myUniqueSiteName');

adding a new post:

var lsTest = getSavedObject('myUniqueSiteName');
var postId = 'id555';
lsTest[postId] = {
    postUrl: postUrl3,
    postTitle: postTitle3,
    postThumb: postThumb3,
}
saveObject('myUniqueSiteName', lsTest);

edited Jul 20, 2016 at 23:35

answered Jul 20, 2016 at 23:25

inorganik

25.7k18 gold badges96 silver badges126 bronze badges

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

1 Comment

Hastig Zusammenstellen Over a year ago

Thanks very much for the detailed answer. I was able to adapt your code and learned a lot from it as I applied it to my local storage testing script.

DDS · Accepted Answer · 2016-07-20 23:28:33Z

1

Variable variables are not a good idea even in PHP. Just make an array or a hash (which is an object, but it's used as a hash or map, where you can add and delete properties or entries as you please).

var posts = {};
var someId = 3333; //or '3333' if it isn't a number

posts[someId] = {
  URL: postURL,
  title: postTitle,
  thumb: postThumb
};

localStorage.setItem('post' + someId, JSON.stringify(posts[someId]));

A property named "foo" on an object named "bar" can be accessed like so:

bar.foo = 'baz';
console.log(bar.foo);

or like so:

bar['foo'] = 'baz';
console.log(bar['foo']);

Which is the same as:

var name = 'foo';
bar[name] = 'baz';
console.log(bar[name]);

Finally, the global object in JavaScript (which in the browser is window) "holds" the global variables.

var myGlobal = 10;
console.log(window.myGlobal); // logs 10
var globalName = 'foo';
window[globalName] = 'baz';
console.log(foo); //logs 'baz'

Using global variables in general is discouraged. Using them to store posts where the name of the var is the id is highly unorthodox and many JS developers would consider it simply wrong.

answered Jul 20, 2016 at 23:28

DDS

4,37525 silver badges33 bronze badges

1 Comment

Hastig Zusammenstellen Over a year ago

Thanks, I was able to get this working right away and understand it the way I understand php variable variables.

Collectives™ on Stack Overflow

Javascript / Jquery - How to set a variable name based on a variable

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related