时间戳

首页 > 解决方案 > 如何使用 Angular 在 Json 对象数组中排名前 20 位组合？

javascript - 如何使用 Angular 在 Json 对象数组中排名前 20 位组合？

问题描述

我有一个列出比萨订单配料的 Json 对象数组。我想使用 Angular 输出 20 种最常见的浇头顺序组合，并从 1-20 对它们进行排名。到目前为止，我只能使用基本示例数组（不是我的 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 和非常基本的数组，我有一个良好的开端

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 有一个输出，它遍历出现数组，即（在我的第二个示例中，变量字母 b [5,1,3,1]）和原始 json 对象数组（页面顶部的嵌套数组）并映射这两个一起从高到低排列它们。任何帮助将不胜感激。

标签： javascriptarraysjsonangularsorting

解决方案

您可以修改代码以使结果像一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>

这是演示：演示

推荐阅读