Как обрабатывать повторяющиеся значения в JQuery

Question

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

во что-то похожее на это :

У меня уже есть HTML и CSS, и я приближаюсь к этому с помощью $ .each, но, похоже, я не могу заполнить внутреннюю часть дерева просмотра:

РЕДАКТИРОВАТЬ:

вот мой скрипт:

AjaxGet('GetUserAppFeatures', { "uid": userid }, false, true)
        .success(function (result) {

            $.each(result.model, function (val) {

                var li = $('<li></li>');

                li.append('<span class="caret">' + result.model[val].AppName + '</span> <input type="checkbox" id="chkApp' + result.model[val].AppId + '">');

                var ul = $('<ul class="nested"></ul>');
                $.each(result.model[val], function (index) {

                    ul.append('<li>' + result.model[val].FeatureName[index] + '</li> <input type="checkbox" id="chkApp' + result.model[val].FeatureId[index] + '">');

                    li.append(ul);
                });


                treeview.append(li);

            });

        });

Answer 1

Для этого типа данных необходимо сгруппировать по.

var yourData = [
{Name : "Forms", value : "Request"},
{Name : "Forms", value : "Report"},
{Name : "Forms", value : "Password"},
{Name : "Energy", value : "Report"},
{Name : "Energy", value : "CUstomer Multiplier"},
{Name : "Energy", value : "Product Feedback"},
];
Renderdata();
function Renderdata(){
  var data = groupBy(yourData,"Name");
  var html = '';
  for(var i= 0 ; i < data.length; i++){
    html += "<div>"+data[i][0].Name+" </div>"+"<ul>";
   for(var j= 0 ; j < data[i].length; j++){
    html += "<li>"+data[i][j].value+"</li>";
  } 
  html += "</ul>";
  }
  $('#div').html(html);
}

function groupBy(collection, property) {
    var i = 0, val, index,
        values = [], result = [];
    for (; i < collection.length; i++) {
        val = collection[i][property];
        index = values.indexOf(val);
        if (index > -1)
            result[index].push(collection[i]);
        else {
            values.push(val);
            result.push([collection[i]]);
        }
    }
    return result;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>

Answer 2

Возможно, вам нужен промежуточный шаг, на котором вы создаете массив, моделирующий второе изображение, которое у вас есть. Что-то вроде:

// Do this before $.each()
var sql_data = {
    Forms: [],
    Energy: []
};


// Inside of $.each() do something like this:
sql_data[col_1].push(col_2);

Где «col_1» и «col_2» - соответственно первый и второй столбцы в ваших данных. Затем вы можете использовать этот объект sql_data для создания HTML, которое вам нужно.