Нажмите кнопку «сортировать», чтобы изменить порядок вывода моих данных в формате HTML.

Question

Я работаю над серией «функций щелчка», которые по существу «сортируют» или перестраивают вывод содержимого моих данных Obj через значения полей данных, которые я уже перебрал в своем HTML.

Например; ниже я пытаюсь создать функцию «сортировки» со значениями поля данных «Размер» - поэтому, когда функция щелчка срабатывает; данные в моем HTML будут переставлены в соответствии с наименьшим к наибольшему. Я достигаю такой логики, проблема у меня есть; когда выполняется функция сортировки, содержимое не перестраивается в HTML. Я могу проверить логику в консоли, но не могу получить вывод HTML для соответствующей сортировки. Какие-нибудь мысли?

вот изображение. Поэтому нажатие на заголовок «Размер» должно выполнить «сортировку / перестановку» ... по размеру.

var json =[{
            "Name": "zips",
            "Type": "Directory",
            "DateModified": "6/14/2018 17:22:50",
            "Size": "5 KB",
        }, {
            "Name": "presets",
            "Type": "Directory",
            "DateModified": "5/11/2018 7:32:10",
            "Size": "2 KB",
        }, {
            "Name": "workflow",
            "Type": "Directory",
            "DateModified": "6/26/2018 10:29:59",
            "Size": "6 KB",
        },
];

var string ="";

for (i in json) {
    string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="ck"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
};

// Just outputs data into bootstrap columns, rows, from Obj data source

document.getElementsByClassName('update-data')[0].innerHTML =string

// Click function to reorganize data accordingly as 'sort' function

document.getElementById('size').addEventListener('click', function () {
    json.sort(function(a, b) {
        return parseFloat(a.Size) - parseFloat(b.Size);
    });
});   

Ниже приведен соответствующий HTML.

<!-- etc -->
        <div>
          <div class="col-md-15 col-sm-1">
            <span id="size">Size</span>
            </div>
        </div>   

        <div class="update-data">
          <!-- output-->
        </div>

Я получаю результат в консоли. Просто не могу получить выведенный HTML-код для обновления.

Answer 1

Вы уже сгенерировали строку html, используя данные JSON, и вставили ее в HTML страницы. Сортировка JSON впоследствии не приведет к автоматическому изменению вывода HTML . То, что вам нужно сделать, это генерировать и вставлять новый отсортированный HTML вместо оригинала каждый раз, когда вы сортируете JSON. Как то так ...

document.getElementById('size').addEventListener('click', function () {
    json.sort(function(a, b) {
        return parseFloat(a.Size) - parseFloat(b.Size);
    });

    var str ="";

    for (i in json) {
        str +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="ck"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
    };

    document.getElementsByClassName('update-data')[0].innerHTML =str;
});