JavaScript二维数组

Question

I am creating javascript two dimensional array

code is :

var field_arr=[];

            $(".dr").each(function(index){

            Id=$(this).attr("id");
            alert(dragId);
            topPos=$("#"+ dragId).position().top;
            left=$("#"+ dragId).position().left;
            parentDiv=$("#"+dragId).parent().attr("id");
            parentDiv= parentDiv.split('-');
            paId=parentDiv[1];
                field_arr[Id]=new Array();
                field_arr[Id]['paId']=paId;
                field_arr[Id]['top']=topPos;
                field_arr[Id]['left']=left;


            });


            console.log(field_arr);

Output Is:

[undefined, [] left 140 paId "1" top 10

What is problem in It Any help Should be appreciated.

Answer 1

The problem is in the display method of your arrays. The information is there, but both alert and console.log will not show it to you because it is expected that the only interesting properties of arrays are the ones with numeric indexes.

In JavaScript, unlike PHP, objects are used as maps/associative arrays.

First to check that your information is actually there:

$(".dr").each(function(index){
  var Id=$(this).attr("id");
  console.log(Id, field_arr[Id]['paId'], field_arr[Id]['top'], field_arr[Id]['left']);
});

Now to make make the display methods work you can go about multiple ways, but the best one is to use objects instead:

var field_arr = Object.create(null); // replace with {} if you want to support IE8-

$(".dr").each(function(index){
  var id = $(this).attr("id"); // added var to keep variable local
  var drag = $("#"+dragId);

  field_arr[id] = Object.create(null); // {}

  field_arr[id]['paId'] = drag.parent().attr("id").split('-')[1];
  field_arr[id]['top']  = drag.position().top;
  field_arr[id]['left'] = drag.position().left;
});

console.log(field_arr);

Iterating over properties of objects is quite easy:

for (var id in field_arr) {
  console.log(field_arr[id], field_arr[id]['paId'], 'etc');
}

Add a hasOwnProperty check if your object doesn't inherit from null ( var obj = {} needs it, unlike var obj = Object.create(null) )

Answer 2

you're storing values with a key string and its wrong because you declared your field_arr as a numerical array (well there's no such thing as associative array in javascript i think).

field_arr[Id] = new Array();
field_arr[Id]['paId']=paId; //this is wrong

You need to create an object to store in values as if they are associated with string keys. But literally they are object properties

redeclare it like this

field_arr[Id] = {}; //you create an object
field_arr[Id]['paId'] = paId; //create an object property named paId and store a value
field_arr[Id].paId = paId; //you can also access property paId like this

EDIT: but to conform to you current code you can access your indexes using strings by accessing it like a property of an object. (Thanks to Tibos )

var field_arr=[];
...
...
field_arr[Id].paId = paId;