Попытка отобразить те же данные из нескольких строк JSON

Question

У меня возникла проблема при попытке отобразить заголовок, состоящий из нескольких результатов, с использованием jQuery и JSON с использованием технологии веб-картографирования Open Layer.Данные импортируются с использованием import.sql и PostgreSQL.

Исходные данные:

2016-02-20, Mexico-Baja_California, штат, еженедельно_zika_confirmed, MX0001, NA, NA, 0, чехлы, POINT (-113.41426 27.808935)

2016-02-20, Mexico-Baja_California, штат, year_cumulative_female, MX0002, NA, NA, 0, кейсы, POINT (-113.41426 27.808935)

2016-02-20, Mexico-Baja_California, штат, year_cumulative_male, MX0003, NA, NA, 0, кейсы, POINT (-113.41426 27.808935)

Ожидаемое отображение должно выглядеть следующим образом:

Mexico-Baja California

• weekly_zika_confirmed
• zika_confirmed_male
• zika_confirmed_female

Вместо отображения в данный момент выглядит как:

Mexico-Baja California

• weekly_zika_confirmed

Mexico-Baja California

• zika_confirmed_male

и так далее.

Фрагмент кода, использующий метод .append, у меня до сих пор:

map.on('click', function(event) {
    $('.sidepanel-reports').empty();
    map.forEachFeatureAtPixel(event.pixel, function(feature,layer) {
        console.log(feature); // ignore this part - for analysis purposes only

        $('.sidepanel-reports').append(`
            <h3>${feature.get('location')}</h3>
            <li>
                <p>${feature.get('dataField')} : ${feature.get('value')} ${feature.get('unit')}</p>
            </li>`
        );
    });
});

Я знаю, что этот код выглядит неправильно - я просто не могу ограничиться одной информацией (местоположение).Поведение должно быть таким же, как в SQL SELECTIVE DISTINCT, чтобы выбрать только одни данные.С 1 данными, он охватывает все результаты, которые подпадают под категорию заголовка.Если вы знаете лучший подход, это очень ценится.

Answer 1

forEachFeatureAtPixel или getFeaturesAtPixel могут возвращать объекты в случайном порядке, если вы используете getFeaturesAtPixel и сортируете массив, вы должны иметь возможность создавать сгруппированные выходные данные.При необходимости сортировка и группировка могут быть расширены до подзаголовков.

var features = map.getFeaturesAtPixel(event.pixel);
features.sort(function(a, b){return a.get('location') < b.get('location') ? -1 : a.get('location') == b.get('location') ? 0 : 1)});
var location;
features.forEach( function(feature) {
    if (feature.get('location') !== location) {
        location = feature.get('location');
        $('.sidepanel-reports').append(`
            <h3>${feature.get('location')}</h3>
        );
    }
    $('.sidepanel-reports').append(`
        <li>
            <p>${feature.get('dataField')} : ${feature.get('value')} ${feature.get('unit')}</p>
        </li>`
    );
});