CODEWITHSUNDEEP
javascriptarraysobjectalertstringify
Mark Rummel
Mark Rummel

Reputation: 2940

alert() entire multi-dimensional object

My entire code example is below and on jsFiddle: http://jsfiddle.net/rEhvt/.

I'm trying to alert() my multi-dimensional JavaScript object. If I alert() a single property of the object - it works. For example:

alert(votes['77777'].stay);

However, if I try to alert() the entire object, then I either get a lot of NULLs or blanks. I tried the following:

alert(JSON.stringify(votes));//returns lots of NULLs

alert(votes.join('\n'));//returns lots of blanks

My intention is to eventually send the object to localStorage with

localStorage['votes']=JSON.stringify(votes);

and retrieve it with

retrievedVotes=JSON.parse(localStorage['votes'])

However, I want to first be able to see the object structure. This is my first attempts at understanding multi-dimensional objects with JavaScript, so any help you can offer is greatly appreciated! Below is all of my code, which is also on jsFiddle: http://jsfiddle.net/rEhvt/.

//Movie #1
var movieID = 55555;
var stay = 'yes';

var votes = [];
votes[movieID]=[];
votes[movieID].stay = stay;

var scenes = 1;
votes[movieID].scenes = scenes; 

//Movie #2
var movieID = 77777;
var stay = 'no';

var votes = [];
votes[movieID]=[];
votes[movieID].stay = stay;

var scenes = 0;
votes[movieID].scenes = scenes; 

//Alert Single Item from votes
alert(votes['77777'].stay);

//Alert entire object
alert(JSON.stringify(votes));//returns NULLs

//Alert entire object
alert(votes.join('\n'));//returns lots of blanks

Upvotes: 2

Views: 196

Answers (5)

canon
canon

Reputation: 41685

Use an object {} rather than an array []... setting votes[7777] is going to reindex the array to accommodate 7,778 elements... with lots and lots of undefined elements (which JSON.stringify() will convert to null).

Plus, you're setting named properties on an array:

votes[movieID]=[];
votes[movieID].stay = stay;

Here's a functional sample using objects (fiddle):

var votes = {
    // Movie #1
    '55555': { 
        stay: 'yes',
        scenes: 1,
        outtakes: 0,
        enhanced: 0,
        teaser: 0
    },
    // Movie #2
    '77777': { 
        stay: 'no',
        scenes: 0,
        outtakes: 0,
        enhanced: 0,
        teaser: 0
    }   
};

console.log(votes[77777].stay);
console.log(votes);

and a 1-to-1 change in your provided code (fiddle):

//Movie #1
var movieID = 55555;
var stay = 'yes';

var votes = {}; // changed to {}
votes[movieID]= {}; // changed to {}
votes[movieID].stay = stay;

var scenes = 1;
votes[movieID].scenes = scenes; 
var outtakes = 0;
votes[movieID].outtakes = outtakes; 
var enhanced = 0;
votes[movieID].enhanced = enhanced; 
var teaser = 0;
votes[movieID].teaser = teaser; 

//Movie #2
var movieID = 77777;
var stay = 'no';

//var votes = []; removed
votes[movieID]= {};  // changed to {}
votes[movieID].stay = stay;

var scenes = 0;
votes[movieID].scenes = scenes; 
var outtakes = 0;
votes[movieID].outtakes = outtakes; 
var enhanced = 0;
votes[movieID].enhanced = enhanced; 
var teaser = 0;
votes[movieID].teaser = teaser; 

//Alert Single Item from votes
alert(votes['77777'].stay);

//Alert entire object/array
alert(JSON.stringify(votes));//returns NULLs​

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71938

alert is not a debug tool

You say you want "to first be able to see the object structure", so you should use proper developer tools. Your browser probably has those, press F12. If you use Firefox, install Firebug.

Then you can use commands like console.log(votes), and the whole thing will be output to the developer console, and you can navigate it like a tree with the mouse.

If you really want to recursively .toString() every object and then alert it, it is possible, but I can't see any good reason to do that.

Upvotes: 1

xdazz
xdazz

Reputation: 160883

You are using array, but what you need is object.

Change 

var votes = [];
votes[movieID]=[];

to

var votes = {};
votes[movieID]={};

and so on.

Upvotes: 1

Danil Speransky
Danil Speransky

Reputation: 30463

You may use {} instead of [] when you define votes variable.

When you define array and set a value by an index, then if there is no elements before it, it fills it by nulls. For example the code:

var arr = [];
arr[5]​ = 0;
alert(JSON.stringify(arr));​​​

will provide [null,null,null,null,null,0].

Upvotes: 1

sachleen
sachleen

Reputation: 31141

var movieID = 55555;
votes[movieID]

This sets the 55555th index of votes to that movie! That's why you have tons of blanks. Same goes for 77777.

If you do

console.log(votes.length);

you'll see this result:

 77778

Another problem, you completely erase the array when you make the second movie by doing var votes = [];

You want to create objects instead of arrays. That's using curly braces { } instead of [ ]

Upvotes: 1

Related Questions