Как правильно создать многомерный массив/объект?

Question

[boga-net]

Всем привет. Что-то я запутался. Всё началось с того, что я решил объединить несколько массивов в один, чтобы получать число всех массивов. Для того, чтобы - добавился новый массив с категорией - кое-что произошло.
Нужен многомерный массив или объект и его правильное создание - за этим я и здесь.

В массиве должны быть : название группы, например - fruits, ключ, например - Apple и значение ключа - ссылка куда-то в дебри интернета.

var array : {
  fruits : {
    Apple: 'http://...png',
    Banana: 'http://...png'
  },
  vegetables : {
    Carrot : 'http://...png',
    Onion : 'http://...png'
  }
};

Группы : fruits, vegetables - будут использоваться (эти ключи будут перебираться в цикле), как их число (length), так и имя.
Ключи и значения каждого массива тоже будут использоваться, поэтому количество ключей тоже нужно.
Но пока это объект, как я понимаю, он не содержит числовые индексы, поэтому свойство length недоступно. Я не могу посмотреть сколько ключей в fruits. Без заморочек. В смысле, чтобы получать его свойство length без выкрутасов, а просто : array.fruits.length.

и тут-то я запнулся, потому что не работал с такими многомерными ассоциативными объектами.
И не пойму, как же правильно создать такой объект/массив, чтобы и просто, и читабельно и как обычно получать длину?

Методом тыка я пришёл к такому варианту :

var array = {
  fruits : [
    ['Apple', 'http://...png'],
    ['Banana', 'http://...png'],
    ['Kiwi', 'http://...png']
  ],
  vegetables : [
    ['Carrot', 'http://...png'],
    ['Onion', 'http://...png']
  ]
};

Но что-то засомневался...
Потом полез в гугл, но отчаялся и вернулся сюда )

Или так ?

var array : {
  fruits : {
    Apple: 'http://...png',
    Banana: 'http://...png'
  },
  vegetables : {
    Carrot : 'http://...png',
    Onion : 'http://...png'
  }
};

Или так ?

var array = [
  fruits = [
    ['Apple', 'http://...png'],
    ['Banana', 'http://...png']
  ],
  vegetables = [
    ['Carrot', 'http://...png'],
    ['Onion', 'http://...png']
  ]
];

Или как-то ещё ? В общем, как правильно будет создать такую штуку ? Или проще остановиться на нескольких массивах, не объединяя их в один ? Например вот так :

var fruits = [
  {
    src: 'http://.png',
    data : 'Apple'
  },
  {
    src : 'https://.png',
    data : 'Banana'
  },

Меня интересует компактность, читабельность, доступность ключей и значений для перебора и доступ к длине массива. Чтоб кошерно было

Спасибо

Answer 1

[Антон Спирин]

Можно так:

var data = {
  fruits : [
    {
      src: 'http://.png',
      data : 'Apple'
    },
    {
      src : 'https://.png',
      data : 'Banana'
    }
  ],
  vegetables : [
    {
      src: 'http://.png',
      data : 'Carrot'
    },
    {
      src : 'https://.png',
      data : 'Potato'
    }
  ]
};

var groups = Object.keys(data);

console.log(groups); // ['fruits', 'vegetables']

Comments

[boga-net]

То, что нужно. Спасибо

[boga-net]

А тут никак нельзя что-то типа :

fruits : [
    { Apple: 'http://.png' },
    { Banana : 'https://.png' }
  ],

Только без скобок ? Чтобы было что-то ещё компактней ?

Попробовал.. Ну да, всё равно возвращаемся к такому варианту..

ruits : {
    Apple: 'http://.png',
    Banana : 'https://.png'
  },
  animals : {
    Apple: 'http://.png',
    Banana : 'https://.png'
  }

Мне то всего нужно - название ключа и ссылка, чтобы с ними работать. Поэтому не хотелось заводить два линшних ключа, как в первом варианте :
src : 'httр...'
data: Apple
А чтобы было сразу Apple : 'httр...'

[boga-net]

Я правильно понимаю, что если использовать вот такой синтаксис :

var data = {
  fruits : {
    Apple: 'http://.png',
    Banana : 'https://.png'
  },
  animals : {
    Apple: 'http://.png',
    Banana : 'https://.png'
  }

то чтобы узнать кол-во элементов, то мне нужно :

var groups = Object.keys(data);
var groups2 = Object.keys(data.fruits);
console.log(groups2.length);

Всё, большое спасибо за магическое Object.keys() ))

[Антон Спирин]

boga-net, по поводу:

var data = {
  fruits : {
    Apple: 'http://.png',
    Banana : 'https://.png'
  },
  animals : {
    Apple: 'http://.png',
    Banana : 'https://.png'
  }

не лучшее решение, с такими данными не во всех кейсах удобно работать.
Так как я написал будет лучше. Со временем думаю сами все поймете)

[boga-net]

Антон Спирин, хорошо, спасибо, я понял. Не стоит гнаться за минимализмом )

[boga-net]

Антон Спирин, Всё, остановлюсь на этом :

var categories = {
  fruits : [
    { Apple: 'http://.png' },
    { Banana : 'https://.png' }
  ],
  animals : [
    { Apple: 'http://.png' },
    { Banana : 'https://.png' }
  ]
};

var category = Object.keys(categories);
var categoryKey = Object.keys(categories.fruits);

console.log(category.length);
console.log(categoryKey.length);

Ещё раз спасибо )

Answer 2

[Даниил Лебединский]

Как мне кажется, если так нужно хранить все в одной сущности, то разумно обойтись массивом объектов, где в каждом объекте будет тип этого объекта, т.е. -
var array = [
{
type: “fruit”,
sort: “apple”
},
{
type: “vegetable”,
sort: “cucumber”
}];

Двумерные массивы не очень удобный вариант для обработки и хранения.

Но лично я бы сделал два массива и не мучайся бы, ибо незачем мешать сущности)

Comments

[boga-net]

Тут такое дело, что я хочу выводить доступные категории, то есть фрукты, овощи, что-то еще, в зависимости от их наличия. Допустим я добавил ещё одну категорию и скрипт сам вывел эту новую категорию. И
массивов будет много, а два - лишь ддя читательности кода в вопросе. И если это будет 20 отдельных массивов, то как быть? Мне как-то нужно их обьединить.

[Даниил Лебединский]

Зачем? 20 категорий - 20 массивов. Не стоит забывать, что каждый из массивов мб очень большим, что элементы из разных массивов могут обладать разными свойствами, в общем своими действиями по тотальному объединению вы загоняете себя в ловушку огромной по вычислительной сложности функции для обработки этого массива, которую очень сложно декомпозировать.

[boga-net]

Даниил Лебединский, да мне всего лишь нужно, чтобы был ключ (имя, например, банан) и ссылка на его изображение.
Мне подсказали object.keys()- вроде то, что нужно. Но как я понял, универсального способа нет. Либо массив, либо объект. Хотелось максимум компактности, простоты и читабельности. Впрочем, спасибо за совет

[iqhater]

Возможно, первый вариант подойдет.
https://jsfiddle.net/rw6n1w40/

[boga-net]

iqhater, Спасибо, буду разбирать. Массив объектов - отличная мысль )

Answer 3

[profesor08]

Многомерный массив: [[],[],[[],[],[]],]

Если ты хочешь легко гонять циклы, то делай массив. Если хочешь доступ по ключам, то объект. ПО объекту тоже можно итеррировать for...in.