Блог

У меня есть данные в формате JSON, подобные этому:

 [ 
 { year: 2012, name: "Foo"}, 
 { year: 2011, name: "Foobar"},
 { year: 2010, name: "Foobar again"},
 { year: 2012, name: "Baz"} 
] 
  

Иногда в JSON будет повторяться год. Я хочу создать панель навигации, которая отображает некоторые данные, соответствующие каждому выбранному году.

 <nav>
 <ul>
  <li><a href="#2010">2010</a></li>
  <li><a href="#2011">2011</a></li>
  <li><a href="#2012">2012</a></li>
 <ul>
</nav>     
  

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

Вот полный ответ:

 var arr = [ 
  { year: 2012, name: "Foo"}, 
  { year: 2011, name: "Foobar"},
  { year: 2010, name: "Foobar again"},
  { year: 2012, name: "Baz"} 
];

// map all the years into an array
var years = arr.map(function (el) {
  return el.year.toString();
});

// remove all of the duplicates from the array
var deduped = years.filter(function(elem, pos) {
    return years.indexOf(elem) == pos;
});

// sort the array
deduped = deduped.sort();

// create a docfrag, append some new options to it
// and append it to the select element
var frag = document.createDocumentFragment();

for (var i = 0, l = deduped.length; i < l; i  ) {
  var item = document.createElement('li');
  var anchor = document.createElement('a');
  anchor.href = '#'   deduped[i];
  anchor.text = deduped[i];
  item.appendChild(anchor);
  frag.appendChild(item);
}

var select = document.querySelector('nav ul');
select.appendChild(frag);
  

ДЕМОНСТРАЦИЯ

Сначала вы можете преобразовать JSOn в список объектов javascript с помощью JSON.parse(yourJSON); Затем вы удаляете свои дубликаты и генерируете свой список из нового массива.