Как в массиве с разными ключами вывести данные на страницу?

Question

[Genri_Rus]

Добрый вечер!

Никак не получается сделать, чтобы мои данные были выведены на страницу из массива

<button>Кнопка</button>
<div></div>

$('button').click(function() {
    
    let button = $(this).next();
  
    let arr = [
       'nameOneItem' : 'Name one',
       'nameTwoItem' : 'Name two'
    ];
  
    let out = '';   
  
    for (let i = 0; i < arr.length; i++ ) {
       out += '<span>' + arr[i] + '</span>';
    }
  
    button.append(out);
});

Вот более наглядный пример: https://codepen.io/Genri_Rus/pen/oRJdoW

Comments

[RAX7]

let arr = [
       'nameOneItem' : 'Name one',
       'nameTwoItem' : 'Name two'
    ];

это не массив
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Genri_Rus]

RAX7, т.е. ключи массивам изменять нельзя ?

Можно только значения добавлять ?

[RAX7]

Genri_Rus, можно, но это не массив. Посмотри как выглядит массив и как объект.
Массив:

let arr = [
       'Name one',
        'Name two'
    ];

объект:

let obj = {
       'nameOneItem' : 'Name one',
       'nameTwoItem' : 'Name two'
    };

[Genri_Rus]

RAX7,
У массива по дефолту же есть ключи ?
0 и 1 в данном случае ?

let arr = [
       'Name one',
        'Name two'
    ];

[RAX7]

Genri_Rus, начни изучать js с основ и по порядку https://learn.javascript.ru/array

[Genri_Rus]

RAX7, вот пример и ключи есть )

Только добавлять я так понял можно:

var test = ['a','b','c','d']
for ( var i=0, n=test.length; i<n; i++){
   test[i] = 'id:' + test[i]
}
console.log(test)

[RAX7]

Genri_Rus, почитай по ссылке выше и ты поймешь гораздо больше.

[Genri_Rus]

RAX7, спасибо, но я уже понял, что в php можно задавать произвольные ключи массивам, а javascript'у нет )

[WapSter]

Genri_Rus, в js все гораздо круче в массиве можно держать кучу объектов, да и запись куда удобнее, чем ассоциативный массив внутри другого ассоциативного массива в php. И судя по вашим комментариям вы не поняли главную вещь, в js нет ассоциативных массивов, есть объекты, и по ключу обращаться можно, obj[key] и перебирать их можно, да и весь js это один сплошной объект.

[Genri_Rus]

Тимур Турсунбаев, по ключу можно обращаться к объекту { }, но не к массиву [ ]

То, что javascript это сплошной объект я понял, когда хотел к массиву добавить произвольные ключи )

[WapSter]

Genri_Rus, я сказал массив?)

[Genri_Rus]

Тимур Турсунбаев, нет )

Я вас понял, спасибо что ответили !

[Genri_Rus]

Тимур Турсунбаев, может не знаете как это можно грамотно сделать: Как при клике добавить произвольные имена тегу span?

Answer 1

[dollar]

$('button').click(function() {
    
    let button = $(this).next();
  
    let arr = {
       'nameOneItem' : 'Name one',
       'nameTwoItem' : 'Name two'
    };
  
    let out = '';   
  
    for (let i in arr) {
       out += '<span>' + arr[i] + '</span>';
    }
  
    button.append(out);
});

Comments

[Genri_Rus]

Т.е. javascript умеет работать с ключами объектов, а перебирать разные ключи в массивах (как в PHP) он не умеет ?

[Stockholm Syndrome]

Genri_Rus, в js массив это объект с целочисленными ключами, а не строковыми

[dollar]

Javascript ни разу не PHP. Он даже не гарантирует порядок ключей (в общем случае). В JavaScript синтаксически отдельно задаются: 1) классические индексируемые массивы квадратными скобками [ ] 2) объекты с любыми свойствами фигурными скобками { }
В JS много всяких дивных ситуаций, так что лучше заранее не смешивать разные подходы.

[Genri_Rus]

Stockholm Syndrome, а вот в чем загвоздка

Просто в php можно и строки использовать в виде ключей

Answer 2

[Алексей Юдов]

У вас неправильно записано......... так не записывают элементы в массиве.
Вот ссылка как правильно

и код на всякий

let obj = {
		    	'nameOneItem' : 'Name one',
		    	'nameTwoItem' : 'Name two'
	    	};
		
		$('button').click(function() {
			for(let key in arr){
				console.log(arr[key])
			}
		});

Answer 3

[Stockholm Syndrome]

let arr = [
  'nameOneItem' : 'Name one',
  'nameTwoItem' : 'Name two'
];

зачем использовать массив как объект?

либо используйте массив по-нормальному

let arr = [
  'Name one',
  'Name two'
];

либо объект

let obj = {
  'nameOneItem' : 'Name one',
  'nameTwoItem' : 'Name two'
};

let out = '';   
let arr = Object.values(obj);
  
for (let i = 0; i < arr.length; i++ ) {
  out += '<span>' + arr[i] + '</span>';
}

Comments

[Genri_Rus]

В данном случае мы не добавили ключи к массиву ?

https://codepen.io/Genri_Rus/pen/EzGRPX

0: "[id:a]"
1: "[id:b]"
2: "[id:c]"
3: "[id:d]"

[Stockholm Syndrome]

Genri_Rus, не добавили

[Genri_Rus]

Stockholm Syndrome, спасибо за ответ!

Я в консоли догадывался (что не добавил), но хотел узнать у других мнение на этот счет)