Ассоциативные массивы в JavaScript

Содержание:
  1. Что такое ассоциативный массив?
  2. Способы создания ассоциативных массивов
  3. Коллекция Map
  4. Объект как ассоциативный массив
  5. Комментарии

Статья, в которой рассмотрим какие в JavaScript имеются способы создания ассоциативных массивов, а также основные приёмы работы с ними.

Что такое ассоциативный массив?

Ассоциативный массив – это массив, в котором обращение к значению осуществляется по ключу.

При этом в качестве ключа используется не порядковый номер (индекс), а некоторая строка, которую мы устанавливаем сами.

Таким образом представить ассоциативный массив можно как набор пар «ключ-значение». При этом каждое значение связано с определённым ключом.

Ассоциативный массив в JavaScript

Для того чтобы получить значение необходимо знать ключ.

Способы создания ассоциативных массивов

В JavaScript имеются обычные массивы. В них в качества ключа используется порядковый номер (индекс) элемента, а создаются они с использованием квадратных скобок или Array(). Эти массивы не могут использоваться в качестве ассоциативных.

Создание ассоциативных массивов в JavaScript можно выполнить двумя разными способами:

  • с помощью объекта Map (появился в языке, начиная с версии ECMAScript 2015);
  • посредством объектов.

Коллекция Map

Map – это коллекция «ключ-значение», которую можно использовать для создания ассоциативных массивов.

Map в отличие от объекта позволяет использовать в качестве ключей значения любых типов как примитивные, так и ссылочные.

Создание пустой коллекции:

JavaScript
// создание пустого ассоциативного массива
const arr = new Map();

Создании коллекции с инициализацией начальных значений:

JavaScript
// создание ассоциативного массива и помещения в него трех пар «ключ-значение»
const arr = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

В этом примере строки «key1», «key2» и «key3» являются ключами, а «value1», «value2» и «value3» соответственно их значениями.

Узнать количество элементов в массиве можно осуществить с помощью свойства size:

JavaScript
arr.size; // 3

Добавление элемента в массив (в экземпляр объекта Map) осуществляется с помощью метода set:

JavaScript
// добавить в массив одну пару "ключ-значение"
arr.set('key4','value4');

// добавить в массив несколько пар "ключ-значение"
arr.set('key5','value5');
arr.set('key6','value6');
// или так
arr
  .set('key5','value5')
  .set('key6','value6');

Если в массиве есть уже такой ключ, то произойдёт установка нового значения, которое будет связано с ним:

JavaScript
arr.set('key1','new value');

Получить значение по ключу выполняется с помощью метода get:

JavaScript
// получить значение, ассоциированное с ключом 'key4'
arr.get('key4'); // 'value4'

Проверить есть ли ключ в массиве можно посредством метода has:

JavaScript
// есть ли в массиве arr ключ key2
arr.has('key2'); // true

Удалить из ассоциативного массива (экземпляра объекта Map) элемент по имени ключа можно с помощью метода delete:

JavaScript
arr.delete('key1'); // true

Данный метод возвращает true, если данный ключ существовал в массиве, в противном случае он возвращает false.

JavaScript
if (arr.delete('key1')) {
  console.log('Запись с ключом "key1" удалена из массива!');
} else {
  console.log('Запись с ключом "key1" не найдена в массиве!');
}

Очистить массив (удалить все элементы) можно выполнить с помощью метода clear.

JavaScript
arr.clear(); // очистим массив arr
arr.size; // 0 (количество элементов)

Перебор ассоциативного массива (объекта Map) обычно осуществляется с помощью цикла for...of. При этом итерацию можно организовать по ключам, значениям и записям ([key, values]).

Перебор ключей можно осуществить посредством итерируемого объекта MapIterator, возвращаемым методом keys:

JavaScript
for (let key of arr.keys()) {
  console.log(key);
}

Для перебора значений можно воспользоваться итерируемым объектом MapIterator, возвращаемым посредством методом values:

JavaScript
for (let value of arr.values()) {
  console.log(value);
}

Перебор записей ассоциативного массива с использованием метода entries:

JavaScript
for (let pair of arr.entries()) {
  // pair - это массив [key, values]
  console.log(pair[0]); // ключ
  console.log(pair[1]); // значение
  console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`);
}

Данный метод используется по умолчанию в for...of, поэтому его можно опустить:

JavaScript
for (let pair of arr) {
  console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`);
}

Кроме этого перебрать ассоциативный массив можно с помощью метода forEach.

JavaScript
arr.forEach(function(value,key) {
  console.log('key = ' + key +', value = ' + value);
});

Преобразовать ассоциативный массив (объект Map) в JSON и обратно можно так:

JavaScript
let arr = new Map([
  ['question', 'Текст вопроса...'],
  ['answer1', 'Ответ 1...'],
  ['answer2', 'Ответ 2...'],
]);
// в JSON
jsonStr = JSON.stringify([...arr]);
// из JSON в Map
mapArr = new Map(JSON.parse(jsonStr));

Объект как ассоциативный массив

В качестве ассоциативного массива можно использовать обычный объект.

Создание пустого ассоциативного массива через объект:

JavaScript
// посредством литерала объекта
const arr1 = {};
// с использованием стандартной функции-конструктора Object
const arr2 = new Object();
// через Object.create
const arr3 = new Object.create(null);

Заполнение ассоциативный массив значениями на этапе его создания:

JavaScript
const myArray = {
  'key1': 'value1',
  'key2': 'value2',
  ...
}

Добавление нового элемента (пары «ключ-значение»):

JavaScript
// добавим строку «текстовое значение» с ключом «key1»
arr['key1'] = 'текстовое значение';
// добавить число 22 с ключом «key2»
arr['key2'] = 22;

Добавление нового элемента будет выполняться только в том случае, если данного ключа в нём нет. Если данный ключ уже существует, то указанное значение просто изменит существующее.

В качестве значения можно использовать не только примитивные типы данных, но и ссылочные.

В JavaScript для обращения к ключу можно использовать не только квадратные скобки, но и выполнять это через точку. Но это доступно только для ключей, имена которых отвечают правилам именования переменных.

JavaScript
arr.key1 = 'текстовое значение';
arr.key2 = 22;

Получение значения ключа:

JavaScript
console.log( myArray['key1'] );
console.log( myArray['key2'] );
console.log( myArray.key1 );
console.log( myArray.key2 );

Получить количество ключей (длину) можно так:

JavaScript
const myArray = {'key1': 'value1', 'key12: 'value2', 'key3': 'value3'};
// Используем keys, чтобы получить массив ключей. А затем с помощью length их длину
Object.keys(myArray).length; // 3

Удаление ключа выполняется с помощью оператора delete:

JavaScript
delete myArray['key1'];

Выполнить проверку (наличия) ключа можно так:

JavaScript
const myArray = {'key1': 'value1', 'key2': 'value2'};
// 1 способ - c использованием hasOwnProperty
if (myArray.hasOwnProperty('key1')) {
  console.log( 'Ключ key1 существует!' );
} else {
  console.log( 'Ключ key1 не существует!' );
}

// 2 способ - с использованием in
if ('key1' in myArray) {
  console.log( 'Ключ key1 есть в массиве!' );
} else {
  console.log( 'Ключ key1 нет в массиве!' );
}

Перебор ключей с помощью цикла for...in:

JavaScript
// myArray - объект как ассоциативный массив
for(key in myArray) {
  console.log( `${key} = ${myArray[key]}` );
}

Преобразовать объект, используем в качестве ассоциативного массива, в JSON и обратно можно так:

JavaScript
// ассоциативный массив
const arr = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

// arr в JSON
const str = JSON.stringify(arr);
// str в объект (ассоциативный массив)
const newArr = JSON.parse(str);

Комментарии: 57

Olga_El
Olga_El

Здравствуйте! Огромное спасибо за статью!

Я совсем новичек в изучении JS и решение некоторых задач вызывает затруднения. Буду очень благодарна, если сможете помочь.

Суть задачи такая: есть два массива.

Массивы для создания функции, которая должна генерировать объект пользователя с полями name, age, job

Необходимо написать функцию, которая будет генерировать объект пользователя с полями name, age и job, заполненными случайным образом. Функция не должна принимать никаких параметров. Возраст пользователя может принимать значения между 18 и 30.

Результат должен быть примерно таким

Результат генерирования объекта пользователя с полями name, age и job с помощью JavaScript

Бьюсь вторые сутки и всё никак((
Александр Мальцев
Александр Мальцев

Добрый день! Код функции, генерирующей объект пользователя с полями name, age и job:

const randomPerson = () => {
  const name = ['Мария', 'Елена', 'Ирина', 'Светлана', 'Есения'];
  const job = ['teacher', 'lawyer', 'journalist', 'doctor', 'seller'];
  const random = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  return {
    name: name[0, random(0, name.length - 1)],
    age: random(18, 30),
    job: job[0, random(0, job.length - 1)]
  }
}

Пример на CodePen: codepen.io/itchief/pen/JjmwbvB

Olga_El
Olga_El

Спасибо огромное!

Со стрелочными функциями всё выглядит более аккуратно и компактно.
Tati Gerbst
Tati Gerbst

Александр, доброго времени суток.

Только познаю js, увидела ваш сайт и хочу попросить помощи с ассоциативными массивами.

Есть два инпута a и b. При нажатии на кнопку функция должна получать из a - ключ, из b - значение и добавить их в массив. Все выводится в out-6. Я сделала, но выводит, добавленный к массиву ключ и значение, только после второго клика. Не могу понять почему. Помогите, пожалуйста, и если можно с объяснением, что я сделала не так. Заранее спасибо.

Надеюсь понятно объяснила)
Александр Мальцев
Александр Мальцев

Добрый день! В функции, вы сначала создаёте переменную out со значением пустая строка. Далее в переменные a и b складываете значения из соответствующих <input>. Потом запускаете цикл, то есть перебираете свойства в a6. Но в a6 вы не добавили новое ключ-значение. И поэтому в out получаете строку только из того, что было в a6 на момент запуска цикла for..in. То, что вы добавили в a6 внутри цикла a6[a] = b у вас сработает только при следующем запуске этого цикла. Поэтому это срабатывает у вас после второго клика.

function f6() {
  let out = '';
  const a = document.querySelector('.i-61').value;
  const b = document.querySelector('.i-62').value;
  for (let key in a6) {
    a6[a] = b;
    out += key + ':' + a6[key] + '<br>';
  }
  document.querySelector('.out-6').innerHTML = out;
}

Поэтому, чтобы ваш пример корректно работал, нужно просто инструкцию a6[a] = b; поместить до цикла:

function f6() {
  let out = '';
  const a = document.querySelector('.i-61').value;
  const b = document.querySelector('.i-62').value;
  a6[a] = b;
  for (let key in a6) {
    out += key + ':' + a6[key] + '<br>';
  }
  document.querySelector('.out-6').innerHTML = out;
}
Tati Gerbst
Tati Gerbst

Александр, спасибо вам большое!

Беру на вооружение, что иногда ошибку можно исправить путем переноса строки кода)
Sunandrey
Sunandrey

Приветствую, Александр. Спасибо за ваши уроки.

Я только, только начал познавать JS и встала передо мной задача с массивом, которую я не в силах пока решить, но очень хочется.

Получаю простой массив в виде цифровой секвенции.

например:
array = [3, 3, 1, 2]

но у массива динамически меняются значения и их количество

например:
array = [4, 2, 2]

цифры это ключи к цветам

1 = “blue”
2 = “green”
3 = “red”
4 = “black”

Как можно автоматически преобразовать цифровые значения в массиве на строки с названием цветов? Ну или получить новый массив?

в общем если такой:
array = [3, 3, 1, 2]
то получить:
colorsArray = ["red", "red", "blue", "green"]
если:
array = [4, 2, 2]
получить:
colorsAarray = ["black" , "green" , "green"]
Александр Мальцев
Александр Мальцев

Привет! Пожалуйста! Эту задачку можно решить очень большим количеством способов. Например, так:

let arr1 = [3, 3, 1, 2]
let arr2 = [4, 2, 2]

const colors = {
  1: 'blue',
  2: 'green',
  3: 'red',
  4: 'black'
}

arr1 = arr1.map(item => colors[item])
arr2 = arr2.map(item => colors[item])

console.log(arr1) // ['red', 'red', 'blue', 'green']
console.log(arr2) // ['black', 'green', 'green']
Sunandrey
Sunandrey

Александр, большое спасибо! Я представлял себе более сложную функцию, но оказалось очень просто.

Alexander_777
Alexander_777

Здравствуйте! Заранее прошу прощения, если вопрос будет совсем уж глупым - я только начинаю познавать чудный мир JS!

Помогите, пожалуйста, с решением такой задачки:

Есть два массива.

В одном лежат результаты:
let answerArr = [
  {
    questionIndex: 1,
    1 : "answer1",
    2 : "answer2",
    3 : "answer3",
    4 : "answer4",
  },
  {
    questionIndex: 2,
    1 : "answer1",
    2 : "answer2",
    3 : "answer3",
    4 : "answer4",
  },
  {
    questionIndex: 3,
    1 : "answer1",
    2 : "answer2",
    3 : "answer3",
    4 : "answer4",
  },
  {
    questionIndex: 4,
    1 : "answer1",
    2 : "answer2",
    3 : "answer3",
    4 : "answer4",
  },
];

Во второй пишутся ответы пользователя:

test.push({
  value: questionIndex,
  label: userAnswer
});
Собственно, массив test формируется без проблем. А вот как на основе его элементов выбрать значения из answerArr? То есть если пользователь выбрал в качестве ответа на первый вопрос вариант "2", на второй - "4" и т.д., то из первой группы ответов вывести значение 2, из второй группы значение 4 и т.д. Проще говоря: как сделать выборку элементов из первого ассоциативного массива, используя значения из второго ассоциативного массива? Нигде не нашел таких примеров. Или я вообще велосипед изобретаю?
Александр Мальцев
Александр Мальцев

Добрый день! Можно конечно попроще организовать структуру answerArr. В данном случае можно написать следующую функцию для получения текста вопроса из массива:

const getAnswer = (questionIndex, answerNum) => {
  const question = answerArr.find(el => el['questionIndex'] === questionIndex);
  if (question) {
    return question[answerNum];
  }
}
// пример
getAnswer(3, 4); // 'answer4'
Alexander_777
Alexander_777

Огромное Вам спасибо! Действительно, очень изящное решение!

А вообще, так сказать, для общего развития - существуют какие-то функции или алгоритмы для сравнения двух ассоциативных массивов между собой (на предмет совпадений)?

Александр Мальцев
Александр Мальцев

Если нужно сравнить на полное совпадение, то можно через JSON:

JSON.stringify(arr1) === JSON.stringify(arr2)

Если необходимо отдельно по ключам, то, например, через forEach:

const arr1 = {
  a: 1,
  b: 'xyz',
  c: true
}
const arr2 = {
  a: 2,
  b: 'xyz',
  c: true,
  d: null
}
Object.keys(arr1).forEach((key) => {
  if (arr1[key] === arr2[key]) {
    console.log(`[${key}]: ${arr1[key]}`);
  }
});
Marine
Marine
Я очень сильно извеняюсь но помогите ещё з одним это Пожалуйста
**
Выведите площадь круга числа после нажатия на кнопку…
**
Александр Мальцев
Александр Мальцев
За что извиняетесь? Эту задачку можно решить так:
<button type="button">Кнопка</button>
<script>
  const radius = 5;
  document.querySelector('button').onclick = () => {
    const square = Math.PI * radius * radius;
    alert(`Площадь круга с радиусом ${radius} см: ${square.toFixed(2)} см2`);
  }
</script>
Marine
Marine
Добрый вечер Олександр Мне сказали здесь мне помогут и я на это надеюсь у меня есть задача которую я не знаю как решить я только начинаю изучать джаву
так что буду благодарна если поможете
[
Переменной присвоено значение даты в формате '2025-12-31'. Преобразуйте эту дату в формат '31/12/2025'. (методы split для преобразования строки в массив чисел, arr[] – вызов элементов массива).
]
Александр Мальцев
Александр Мальцев
Добрый день!
Эту задачку можно решить, например, так:
const date = '2025-12-31';
const arr = date.split('-');
const result = arr.reverse().join('/');
console.log(result);
Marine
Marine
Спасибо большое очень помогли
ElenaArapova
ElenaArapova
Здравствуйте, Александр! Спасибо за статью. И вообще весь материал на сайте так хорошо написан. Всегда все понятно становится. Это лучший сайт для новичков и не только.
У меня такой вопрос: можно ли получить (записать в переменную) имя ключа из ассоциативного массива?
Мне нужно переделать ассоциативный массив [ [ «key1», «value1» ], [ «key2», «value2» ] ] в единый объект вида { key1: «value1», key2: «value2» }
ElenaArapova
ElenaArapova
)) нашла, как сделать (через Object.fromEntries())
barmalej
barmalej
Приветствую!
const test1 = new Map([
    ['t1', 'content1'],
    ['t2', 'content2'],
    ['t3', 'content3'],
    ['t4', 'content4'],
    ['t5', 'content5']
]);
А как можно вытащить content3, зная что это значение у третьего элемента?
Александр Мальцев
Александр Мальцев
Привет!
Получить значение элемента по ключу можно так:
const value = test1.get('t3');
barmalej
barmalej
Да, но я не знаю значение ключа.
Я знаю, что это третий элемент (по порядку).
Александр Мальцев
Александр Мальцев
Тогда нужно преобразовать объект Map в массив:
// создаём массив из Map
const array = Array.from(test1, ([name, value]) => ({ name, value }));
// получаем значение по индексу
const value = array[2].value;
barmalej
barmalej
Да, наверно это лучшее решение. Спасибо!
Rostislav
Rostislav
Доброго времени суток!) Александр, подскажите пожалуйста, как сравнить свойства объекта? Мне нужно вывести овощи в отдельном списке, вот код заранее спасибо!!!
let products = {     
  "1": {"category": "fruit"},
  "2": {"category": "fruit"},
  "3": {"category": "fruit"},
  "4": {"category": "vegetable"},
  "5": {"category": "vegetable"},
  "6": {"category": "vegetable"}
}
let producList = "";
for (var key in products) {
  producList += '<div class="product-thumb">'
  producList += products[key].category + '<br>';
  producList += '</div>';
}
document.getElementById('product-list').innerHTML = producList;
Александр Мальцев
Александр Мальцев
Привет!
Например, так (в этом случае у вас отобразятся только овощи):
for (let key in products) {
  // если products[key]['category'] не равно 'vegetable', то тогда переходим к следующей итерации
  if (products[key]['category'] !== 'vegetable') {
    continue;
  }
  ...
}
oleksii
oleksii
отличная статья, для чайников, как я не хватает инфы (добыта эксперементальным путем):
— при попытке добавления в массив пары ключ=>значения, при совпадении ключа — новый элемент не добавляется, ошибки нет
Александр Мальцев
Александр Мальцев
Спасибо! В статье этот момент описан, может, конечно, не так явно. А именно: если данный ключ уже имеется в ассоциативном массиве, то этот код просто изменит значение существующего ключа.

Таким образом, когда вы пытаетесь добавить в ассоциативный массив (объект) ключ, который уже имеется в нём, то он конечно в него ещё раз не будет добавлен. В этом случае просто произойдёт операция присвоения этому ключу нового значения. Если это значение такое же, то всё равно оно будет перезаписано новым значением, хоть оно и точно такое же.
const person = {
  name: 'Иван',
  age: 23
}

// установим ключу name новое значение 'Иван'
person['name'] = 'Иван';
Andrey
Andrey
Добрый день Александр, как можно с Вами связаться.Мне нужно написать небольшой скрипт на js(За деньги), для сайта, если Вы сможете и у Вас есть время, то свяжитесь со мной или напишите, что нет.
Александр Мальцев
Александр Мальцев
Привет! Email для связи расположен в конце страницы.
Влад Волинчук
Влад Волинчук
Раз уж все тут задают вопросы, попробую и я)
Почему {0:5}[0] выдаёт ошибку, а +{0:5}[0] нет? Понятно, что операция "+" может пытаться превратить обьект в число, но в таком случае было бы NaN[0]. Со строками такой проблемы нет, т.е. {a:5}[a] работает нормально, и ({0:5})[0] тоже
Александр Мальцев
Александр Мальцев
Эти случаи JavaScript рассматривает по-разному.
Эту запись {0:5}[0] он не может понять и, следовательно, возникает ошибка «Uncaught SyntaxError: Unexpected token ':'». Если вы хотите её вычислить, то оберните в круглые скобки: ({0:5}[0]).В этом случае он поймёт, что вы хотите получить значение ключа «0».
Эта запись {a:5}[a] тоже не должна работать, скорее всего у вас где-то объявлена переменная «a».
Запись +{0:5}[0] не приводит к ошибке потому что здесь JavaScript понимает что ему нужно делать. Т.е. вычислить выражение, расположенное до «унарного плюса», а затем привести его к числу. Результат вычисления {0:5}[0] будет 5. Далее он 5 приводит к 5. Операнд «+» здесь выполняется самым последним, т.к. он имеет более низкий приоритет чем «[]».
Когда вы записываете так ({0:5})[0] вы тем самым расставляете приоритеты и JavaScript понимает что вы хотите. Т.к. операнд «()» имеет более высокий приоритет чем «[]».
Maksim
Maksim
Здравствуйте. Подскажите пожалуйста, как справиться с задачей, в статье не нашёл.
Полный текст задачи:
При нажатии b-11 выполняете функцию f11. Функция должна получить ключ из i-11 и удалить запись из массива a11 с таким ключом. После этого вывести массив в out-11.
Мои попытки написать это тщетны.
let out11 = '';
function f11(a11, out11) {
  let I11 = document.querySelector('.i-11').value;
  for (let key in a11) {
    if (key == I11) {
      delete a11.key;
    } 
    out11 += `${key} : ${a11[key]} <br>`;
  }
  document.querySelector('.out-11').innerHTML = out11;
}
document.querySelector('.b-11').onclick = () => {
  let a11 = {
    "b": 17,
    "e": 22,
    "j": 17,
    "k": 22,
    "d": 54
  };
  f11(a11, out11);
}
Александр Мальцев
Александр Мальцев
Здравствуйте! Для доступа к свойству используйте []:
function f11(a11, out11) {
  let I11 = document.querySelector('.i-11').value;
  for (let key in a11) {
    if (key == I11) {
      delete a11[key];
      continue;
    }
    out11 += `${key} : ${a11[key]}`;
  }
  document.querySelector('.out-11').innerHTML = out11;
}
Алеша
Алеша
Александр, доброго времени суток, подскажите, если не затруднит...., третий день «бьюсь» не могу дать толку…
есть данные:
 monthsWorked:{
	January: {
         	 hour: 180,
         	 prize: 10,
         	 salary: 45000
        },
	February: {
         	 hour: 140,
         	 prize: 5,
         	 salary: 35000
        },
	March: {
         	 hour: 160,
         	 prize: 15,
         	 salary: 40000
        }}
хочу получить что-то такое при переборе объекта циклом for in:
<table style="width:100%">
  <tr>
    <th>january</th><th>february</th><th>march</th>//данные поля хочу с итерировать на js
  </tr>
  <tr>
    <td>hour: 180</td><td>hour: 160</td><td>hour: 180</td>//данные поля хочу с итерировать на js
  </tr>
  <tr>
    <td>prize: 10</td><td>prize: 5</td><td>prize: 10</td>//данные поля хочу с итерировать на js
  </tr>
  <tr>
    <td>salary: 45000</td><td>salary: 31000</td><td>salary: 45000</td>//данные поля хочу с итерировать на js
  </tr>
</table>
Благодарю…
Александр Мальцев
Александр Мальцев
Привет! Для этого данные необходимо преобразовать данные в удобный для вывода вид.
Например:
var data = {
  monthsWorked: {
    January: {
      hour: 180,
      prize: 10,
      salary: 45000
    },
    February: {
      hour: 140,
      prize: 5,
      salary: 35000
    },
    March: {
      hour: 160,
      prize: 15,
      salary: 40000
    }
  }
}

var result = {
  months: '',
  hour: '',
  prize: '',
  salary: ''
};

for (var key1 in data['monthsWorked']) {
  result['months'] += '<th>' + key1 + '</th>';
  for (var key2 in data['monthsWorked'][key1]) {
    result[key2] += '<td>' + key2 + ': ' + data['monthsWorked'][key1][key2] + '</td>';
  }
}
Затем сформировать нужный HTML код:
var output = '<table style="width:100%"><tr>{{months}}</tr><tr>{{hour}}</tr><tr>{{prize}}</tr><tr>{{salary}}</tr></table>';
output = output.replace('{{months}}', result.months);
output = output.replace('{{hour}}', result.hour);
output = output.replace('{{prize}}', result.prize);
output = output.replace('{{salary}}', result.salary);
После этого вставить его, например, с помощью innerHTML в нужный элемент страницы.
Алеша
Алеша
Спасибо большое!!!
Указали правильный путь!!!
Я совсем и забыл про replace!!!.. а то получал массив из 12 элементов и не знал как его дальше преобразовать.
Ещё раз СПАСИБО!!!
Aliaksandr Zhuk
Aliaksandr Zhuk
Добрый день.
Подскажите, как из такой разметки получить данные (название — data_name, цена — price-item, количество — значение input name=«input_val») и записать в строку «название — цена — количество»
<div class="item-mycart" data-id-elem="98" data_name="Московский кирпич">
  <div class="row-price_input">
    <div class="price-item">7777 <span>руб</span></div>
    <div class="input-count">
      <span class="icont-count minus" data-oper="minus">-</span>
      <input name="input_val" type="text" title="Количество" value="1">
      <span class="icont-count plus" data-oper="minus">+</span>
    </div>
    <div class="sum">
      <span>=</span><span class="sum_price">7777</span><span>руб</span>
    </div>
...
<div class="item-mycart" data-id-elem="97" data_name="Амстердам">
  <div class="row-price_input">
    <div class="price-item">50,55 <span>руб</span></div>
    <div class="input-count">
      <span class="icont-count minus" data-oper="minus">-</span>
      <input name="input_val" type="text" title="Количество" value="1">
      <span class="icont-count plus" data-oper="minus">+</span>
    </div>
    <div class="sum">
      <span>=</span><span class="sum_price">150</span><span>руб</span>
    </div>
Попытался сделать таким образом, но как записать в строку не понимаю. Подскажите, пожалуйста, как сделать перебор и записать нужные данные в строку.
let 
  order_name = [],
  order_count = [],
  order_cost = [];
$(".item-mycart").each(function () {
  order_name.push($(this).attr('data_name'));
});
$('input[name="input_val"]').each(function () {
  order_count.push($(this).val());
});
$('.sum_price').each(function () {
  order_cost.push($(this).text());
});
Александр Мальцев
Александр Мальцев
Вам нужно создать массив, в котором каждый его элемент будет являться объектом и состоять из 3 свойств: name, count и cost.
let orders = [];
$('.item-mycart').each(function () {
  let
    name = $(this).attr('data_name'),
    count = $(this).find('input[name="input_val"]').val();
    cost = $(this).find('.sum_price').text();
  orders.push({
    'name': name,
    'count': count,
    'cost': cost
  })
});

// потом, если нужно вывести, например, в консоль
for (var i = 0, length = orders.length; i < length; i++) {
  console.log('name = ' + orders[i]['name'] + ', count = ' + orders[i]['name'] + ', cost = ' + orders[i]['cost']);
}
Aliaksandr Zhuk
Aliaksandr Zhuk
Большое спасибо, Александр!
Andrei Krivisheev
Andrei Krivisheev
Прошу прощения за тупой вопрос)) но как можно добавить ключ выводимый из input?? ))
Александр Мальцев
Александр Мальцев
Расскажите подробнее, что вы хотите сделать? HTML элемент input имеет только атрибуты. Что вы подразумеваете под ключом и куда его нужно добавить?
Andrei Krivisheev
Andrei Krivisheev
есть два input в html, значение введенное в первый input, должно создавать новый ключ в ассоциативном массиве, а значение из второго input, записывать значение этого ключа.
Александр Мальцев
Александр Мальцев
Это можно выполнить так (например, при нажатии на кнопку получаем значение этих input м создаем на основе их значений ассоциативный массив):
<input type="text" id="key" value="">
<input type="text" id="value" value="">
<button type="button" id="action">Создать ассоциативный массив</button>

<script>
var arr;
// при нажатию на кнопку
document.querySelector('#action').addEventListener('click', function () {
  var
    // получаем значение 1 input
    key = document.querySelector('#key').value,
    // получаем значение 2 input        
    value = document.querySelector('#value').value;
    
  // присваиваем переменной пустой объект
  arr = {};
  // добавляем в объект ключ с соответствующим значением
  arr[key] = value;
  // выводи объект (ассоциативный массив) в консоль
  console.log(arr);
});
</script>
multidem
multidem
Здравствуйте, я не понял простой вещи, как перебрать в цикле объекты в массиве с разными именами? Подскажите пож.
Чтобы вывести на экран 3 картинки со всеми свойствами. Если имя объектов совпадает, например просто «pic», то вопросов нет —
<body>
<p id="myim"></p>
        
<script>
  slideShow('.slider', {
    isAutoplay: true
  });
  s = ''
  arrObj = [
    { pic: { f: '1.jpg', w: 500, h: 500 } },
    { pic: { f: '2.jpg', w: 700, h: 700 } },
    { pic: { f: '3.jpg', w: 900, h: 900 } }
  ]
  for (i = 0; i < 3; i++) {
    f = arrObj[i].pic.f
    w = arrObj[i].pic.w
    h = arrObj[i].pic.h
    s += "<img src='images/" + arrObj[i].pic.f + "' width='" + arrObj[i].pic.w + "' height='" + arrObj[i].pic.h + "'>"
  }
  myim.innerHTML = s
</script>
</body>
Но когда имена разные «pic1», «pic2», «pic3» не понимаю какой синтаксис должен быть в цикле? Спасибо.
arrObj = [
  { pic1: { f: '1.jpg', w: 500, h: 500 } },
  { pic2: { f: '2.jpg', w: 700, h: 700 } },
  { pic3: { f: '3.jpg', w: 900, h: 900 } }
]
Александр Мальцев
Александр Мальцев
Привет!
Это, например, можно выполнить с помощью цикла for..in:
var s = ''
arrObj = [
  { pic1: { f: '1.jpg', w: 500, h: 500 } },
  { pic2: { f: '2.jpg', w: 700, h: 700 } },
  { pic3: { f: '3.jpg', w: 900, h: 900 } }
]
for (i = 0; i < arrObj.length; i++) {
  for (key in arrObj[i]) {
    f = arrObj[i][key].f
    w = arrObj[i][key].w
    h = arrObj[i][key].h
    s += "<img src='images/" + f + "' width='" + w + "' height='" + h + "'>"
  }
}
myim.innerHTML = s
multidem
multidem
Спасибо, Александр! Трудно было бы догадаться самостоятельно о такой конструкции. Хотя я уже понял, что имя объектов можно вообще выбросить ):

let s=''
          
          arrObj = [
          { f:'1.jpg', w:500, h:500 },
          { f:'2.jpg', w:700, h:700 },
          { f:'3.jpg', w:900, h:900 }
          ]
          
          
                  for (i=0; i<3; i++) {
                  
                  f = arrObj[i].f
                  w = arrObj[i].w
                  h = arrObj[i].h 
                  
                  s += "<img src='images/"+f+"' width='"+w+"' height='"+h+"'>"
                  }  
                  
                  myim.innerHTML = s
Александр Мальцев
Александр Мальцев
Да, если они не нужны, то их конечно можно не использовать.
Александр
Александр
Александр, отличная статья.
Подскажите, а как можно достучаться до массивов вложенных в ассоциативный.

Допустим есть асс. массив:
let a = {
  b: [['Иван', 0], 'Татьяна', 'Ирина'],
  c: ['Сергей', 'Карп', ['Тамара', 1]],
  d: [['Петр', 1], 'Иван', ['Николай', 0]]
}
Как из него получить имена, у которых вторым значением идет 0?
Александр Мальцев
Александр Мальцев
Спасибо.
Это можно решить таким скриптиком:
// переменная, для хранения результата
let result = [];

// перебираем ассоциативный массив
for (key in a) {
  // если элемент ассоциативного массива является массивом
  if (Array.isArray(a[key])) {
    // перебираем массив
    a[key].forEach(function (item) {
      // если элемент массива является массивом, то продолжаем
      if (Array.isArray(item)) {
        // если его длина 2, то продолжаем
        if (item.length === 2) {
          // если значение второго элемента является 0, то продолжаем
          if (item[1] === 0) {
            // помещаем найденное значение в результат
            result.push(item[0]);
          }
        }
      }
    });
  }
};

// выводим результат в консоль
console.log(result.join(', '));
Александр
Александр
Спасибо огромное. А как быть с объектом в объекте? Как его можно вывести на экран? Получается надо дважды перебрать for in или обратиться как-то с рекурсией?

let countryInform = {
Thailand: {

'population':'68 6158 58',
'capital': 'Bangkok'
},
China: {

'population': '1 404 328 611',
'capital':'Pekin'
},
India: {

'population':'1 349 857 000',
'capital': 'Deli'
},

}
Александр Мальцев
Александр Мальцев
Зачем? Просто нужно обратиться к значениям по ключам (именам свойств) объекта.
Это можно выполнить с помощью одного цикла for..in:
for (key in countryInform) {
  // выводим название страны
  console.log('Страна = ' + key);
  // выводим население страны
  console.log('Население = ' + countryInform[key]['population']);
  // выводим столицу страны
  console.log('Столица = ' + countryInform[key]['capital']);
  console.log('===');
}
Александр
Александр
Спасибо.
Петр
Петр
Александр, будьте добры, подскажите как реализовать.
Вывожу данные на html страницу из json'а.
$('document').ready(function(){
    loadGoods();
});
function loadGoods() {
    $.getJSON('zkprods.json', function (data) {
        var out = '';
        for (var key in data){
            out+='<div class="product-card-wrap">';
            out+='<div class="product-card">';
            out+='<img src="'+data[key].image+'">';
            out+='<p class="product-name">'+data[key]['name']+'</p>';
            out+='<hr>';
            out+='<p class="product-description">'+data[key]['des']+'</p>';
            out+='<p class="product-description">'+data[key]['des2']+'</p>';
            out+='</div>';
            out+='<div class="bottom-part-weight">';
            out+='<img src="ves.png">'
            out+='<p class="product-weight">'+data[key]['weight']+'</p>';
            out+='</div>';
            out+='</div>';
        }
        $('#prodzk').html(out);
    })
}
Json примерно такой

{
	"mr7" : {
		"image" : "1.png",
		"name" : "2",
		"des" : "3",
		"des2" : "4",
		"weight" : "5 г"
	},
	"mr7" : {
		"image" : "1.png",
		"name" : "2",
		"des" : "3",
		"des2" : "4",
		"weight" : "5 г"
	},
	"zk5" : {
		"image" : "1.png",
		"name" : "2",
		"des" : "3",
		"des2" : "4",
		"weight" : "5 г"
	},
	"zk6" : {
		"image" : "1.png",
		"name" : "2",
		"des" : "3",
		"des2" : "4",
		"weight" : "5 г"
	},
	"zk7" : {
		"image" : "1.png",
		"name" : "2",
		"des" : "3",
		"des2" : "4",
		"weight" : "5 г"
	}
}
Как организовать вывод по определенным ключам? Например выводить только «mr» или только «zk».
Или для каждого дива свой json и скрипт создавать? Правильно ли так?
Александр Мальцев
Александр Мальцев
Можно так:
function loadGoods() {
  $.getJSON('zkprods.json', function (data) {
    var out = '';
    var q = 'mr';
    for (var key in data) {
      if (key.indexOf(q) !== 0) {
        continue;
      }
      out += '<div class="product-card-wrap">';
      ...
q — это переменная, в которой находится ключ.
Далее проверяем, если в key нет этого ключа, то переходим к следующей итерации.
Петр
Петр
Спасибо за ответ, учту если пригодится :) А так, пока ответа ждал решил просто массивы выводить и json не нужен уже, информации не так много для вывода :)