Получить индекс элемента json (jquery)

249

13 апреля 2017, 18:59

var articles = {
"Bootstrap": [
{"id":"1", "title":"Введение"},
{"id":"2", "title":"Как установить"},
{"id":"3", "title":"Сетка"}
],
"JavaScript": [
{"id":"4", "title":"Основы"},
{"id":"5", "title":"Выборка элементов"}
]  
};
$.each(articles,function(key,data) {
console.log('Раздел' + /*что-то*/ +': ' + key);
$.each(data, function(index,value) {
console.log('Статья' + (index+1) + ': id = ' + value['id'] + '; Название = 
'+ value['title']);
});
});
// Результат:
//   Раздел: Bootstrap
//   Статья1: id = 1; Название = Введение
//   Статья2: id = 2; Название = Как установить
//   Статья3: id = 3; Название = Сетка
//   Раздел: JavaScript
//   Статья1: id = 4; Название = Основы
//   Статья2: id = 5; Название = Выборка элементов

Вместо /*что-то*/ нужно вставить порядковый номер элемента. Аналогично, как в массиве с index в примере выше. Чтобы в результате было:

//   Раздел 1: Bootstrap
//   Статья: id = 1; Название = Введение
//   Статья: id = 2; Название = Как установить
//   Статья: id = 3; Название = Сетка
//   Раздел 2: JavaScript
//   Статья: id = 4; Название = Основы
//   Статья: id = 5; Название = Выборка элементов

Почему-то ни с i=0 и дальнейшим i++ , ни $(this).index() не получилось.

Answer 1

Можно найти индекс ключа в массиве ключей:

(Object.keys(articles).indexOf(key)+1)

var articles = { 
  "Bootstrap": [ 
    {"id":"1", "title":"Введение"}, 
    {"id":"2", "title":"Как установить"}, 
    {"id":"3", "title":"Сетка"} 
  ], 
  "JavaScript": [ 
    {"id":"4", "title":"Основы"}, 
    {"id":"5", "title":"Выборка элементов"} 
  ]   
}; 
 
$.each(articles,function(key,data) { 
  console.log('Раздел ' +  
    (Object.keys(articles).indexOf(key)+1) +  
    ': ' + key); 
  $.each(data, function(index,value) { 
    console.log('Статья' + (index+1) + ': id = ' + value['id'] + '; Название = '+ value['title']); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Имеет смысл закешировать массив ключей вне цикла each:

var keys = Object.keys(articles);

Или даже заранее составить карту индексов:

var i = 0, keymap = Object.keys(articles).reduce(function(carry, key){
  carry[key] = ++i;
}, {});

var articles = { 
  "Bootstrap": [ 
    {"id":"1", "title":"Введение"}, 
    {"id":"2", "title":"Как установить"}, 
    {"id":"3", "title":"Сетка"} 
  ], 
  "JavaScript": [ 
    {"id":"4", "title":"Основы"}, 
    {"id":"5", "title":"Выборка элементов"} 
  ]   
}; 
 
var i = 0, keymap = Object.keys(articles).reduce(function(carry, key){ 
  carry[key] = ++i; 
  return carry; 
}, {}); 
 
$.each(articles,function(key,data) { 
  console.log('Раздел ' +  
    (keymap[key]) +  
    ': ' + key); 
  $.each(data, function(index,value) { 
    console.log('Статья' + (index+1) + ': id = ' + value['id'] + '; Название = '+ value['title']); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Создание сайта для юридической фирмы в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Автоформат ячейки в google spreadsheets с помощью App Script

Нужно сделать автоформатирование номера телефона введенного в ячейку (привести его к стандартному формату вида 7хххххххххх) Например при...

411

javascript

Доступ до frame (not iframe) с помощью jQuery

Есть indexhtml с двумя frame

276

javascript

Проблема с datepicker

Когда скроллю страницу, календарь уползает со своего певоначального местаКак зафиксировать положение? Пробую изменить parentEl c 'body' на другой,...

259

javascript

Загрузка JSON в fabric js

Всем привет! У меня такой вопросЕсть инструмент по рисованию, который использует fabric js, и есть инструмент по загрузке уже нарисованного из ранее...

199