[{"Category":"cat","Value":"large cat"},
{"Category":"cat","Value":"small cat"},
{"Category":"dog","Value":"large dog"},
{"Category":"dog","Value":"little dog"},
{"Category":"dog","Value":"cute dog"}]

Jeśli mam taki plik JSON, jak mogę wyświetlać je z kątowym JS do tej samej kategorii jak poniżej?

cat 
large cat
small cat
dog
large dog
little dog
cute dog

Próbowałem szukać odpowiedzi, ale większość z nich próbuje usunąć zduplikowane wpisy zamiast łączyć je w tę samą kategorię.

Użyłem NG-REPEAT i unikalny algorytm filtra, który jest dostarczany przez Ten link.
..
.. Czy mógłbyś mi powiedzieć, jak to zrobić?

Poniższy kod to obecnie używam.

<div ng-repeat="animal in animals | unique : 'Category'">
        <div>{{animal.Category}}</div>
        <div>{{animal.Value}}</div> 
</div>

Daje to wynikowi

cat
large cat
dog
large dog

Niestety, nie jest to, czego oczekuję.

0
Julius Chen 26 czerwiec 2017, 20:39

3 odpowiedzi

Najlepsza odpowiedź

Pracujący Plunker.

Użyj pętli utworzonej za pomocą unikalnego filtra, aby dowiedzieć się unikalnych kategorii. A następnie użyj zagnieżdżonej pętli, aby wymienić zwierzęta pasujące do kategorii jak poniżej:

<div ng-repeat="category in animals | unique : 'Category'">
  <span style="font-weight: bold">{{category.Category}}</span>
  <div ng-repeat="animal in animals" ng-show="animal.Category === category.Category">
    {{animal.Value}}
  </div>
</div>
0
CodeWarrior 26 czerwiec 2017, 17:52

Użyj filtra Groupby

<div ng-repeat="animal in animals  |  groupBy:'Category'" >
<h2 ng-show="animals[$index - 1].Category !=animal.Category">{{item.Category }}</h2>
<ul>
    <li>{{animal.Value}}</li>
</ul>
0
HARI 26 czerwiec 2017, 17:55

Możesz użyć array # zmniejszyć i Array # Map dla pożądany wynik.

let data = [{
    category: "cat",
    value: "large cat"
}, {
    category: "cat",
    value: "small cat"
}, {
    category: "dog",
    value: "large dog"
}, {
    category: "dog",
    value: "small dog"
}, {
    category: "dog",
    value: "cute dog"
}, {
    category: "turtle",
    value: "water turtle"
}, {
    category: "turtle",
    value: "land turtle"
}];

let grouped = data.reduce((out, item) => {
    out[item.category] = out[item.category] || [];
    out[item.category].push(item.value);

    return out;
}, {});

console.log(grouped);

let categories = Object.keys(grouped).map(key => ({key, values: grouped[key]}));

console.log(categories);
0
Shane 26 czerwiec 2017, 17:53