Как я могу получить рейтинг 20 лучших комбинаций в массиве Json объектов, используя Angular?

Question

У меня есть массив Json объектов, в котором перечислены начинки пиццы. Я хотел бы использовать Angular, чтобы вывести 20 самых распространенных комбинаций добавок и присвоить им рейтинг 1-20. До сих пор я мог использовать только базовый массив c примеров (не мой json массив объектов) для вывода количества вхождений в массиве и вывода их в javascript. (Я знаю, насколько это далеко) Как мне добиться этого или хотя бы получить хорошее начало в правильном направлении?

Json Массив объектов, для которых я хочу, чтобы это работало для

//it is much bigger than this but shortened it for brevity 
[{
        "toppings": [
            "pepperoni"
        ]
    },
    {
        "toppings": [
            "feta cheese"
        ]
    },
    {
        "toppings": [
            "pepperoni"
        ]
    },
    {
        "toppings": [
            "bacon"
        ]
    },
    {
        "toppings": [
            "sausage",
            "beef"
        ]
    }
]

Не json и очень базовый c массив, с которого я хорошо начал

var arr = [2, 2, 2, 2, 2, 4, 5, 5, 5, 9];

function foo(arr) {
    var a = [], b = [], prev;

    arr.sort();
    for ( var i = 0; i < arr.length; i++ ) {
        if ( arr[i] !== prev ) {
            a.push(arr[i]);
            b.push(1);
        } else {
            b[b.length-1]++;
        }
        prev = arr[i];
    }

    return [a, b];
}

var result = foo(arr);
document.write('[' + result[0] + ']<br>[' + result[1] + ']')   
//currently writes [2,4,5,9] [5,1,3,1] 2 appears 5 times , 4 appears 1 time etc.

В итоге я хотел бы получить вывод с Ngfor, который перебирает массив вхождений ie (Во втором примере переменная буква b [5,1,3,1]) и исходный массив объектов json (вложенный массив в верхней части страницы) и сопоставляют их вместе, чтобы ранжировать их от большинства к наименьшему. Любая помощь будет оценена.

Answer 1

Вы можете изменить свой код так, чтобы результат получился как пара key value:

function foo(arr) {
var a = [], b = [], prev;

arr.sort();
for ( var i = 0; i < arr.length; i++ ) {
    if ( arr[i] !== prev ) {
        a.push(arr[i]);
        b.push(1);
    } else {
        b[b.length-1]++;
    }
    prev = arr[i];
}
  let result = [];
  a.forEach((item,i)=>{  
        let obj = { key : item , value : b[i] }; 
        result.push(obj);   
       })
  
    return result.sort(function(a, b) {
     return  b.value - a.value;
});
   
 }

let x = [{
        "toppings": [
            "pepperoni"
        ]
    },
    {
        "toppings": [
            "feta cheese"
        ]
    },
    {
        "toppings": [
            "pepperoni"
        ]
    },
    {
        "toppings": [
            "bacon"
        ]
    },
    {
        "toppings": [
            "sausage",
            "beef"
        ]
    }
];

let obj = {"toppings" : []};
x.forEach((el)=>{
   obj.toppings = obj.toppings.concat(el.toppings);
});

var result = foo( obj.toppings);

console.log(result)

Теперь в файле component.html вы можете выполнять итерации, как показано ниже:

<div *ngFor="let item of result">
    <p> {{item.key}} appears {{item.value}} {{(item.value>1)? 'times' : 'time'}}
</div>

Вот демо: demo