Как фильтровать объекты по значению ключа, заданного внутри одного и того же объекта

0

У меня есть список объектов, в которых я должен фильтровать объекты на основе значения ключа, присутствующего внутри одного и того же объекта, и создавать <div> с содержимым.

Список объектов:

{
    "statusCode" : 200,
    "statusMessage" : "OK",
    "result" : [
    {
            "owner" : {
                "id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
            },
            "name" : "Test 12345",
            "description" : "Test 12345",
            "created_at" : 1465222538,
            "active" : "true",
            "id" : "2ade9236-c382-400c-9c0b-94e96db9b2aa",
            "status" : "OPEN"
        }, {
            "owner" : {
                "id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
            },
            "name" : "sample2",
            "description" : "sample2",
            "created_at" : 1465117865,
            "active" : "true",
            "id" : "8bf206f9-d3e0-43f4-ba3f-f71c88db9b0e",
            "status" : "IN PROGRESS"
        }, 
    ]
}

Я хочу фильтровать данные на основе "status": "IN PROGRESS" или "status": "OPEN" и показывать данные внутри <li> но вещь является идентификатором (ключ) присутствует внутри одного и того же объекта. Как достичь этого в angularjs или vanilla javascript?

На данный момент я циклически использую ng-repeat для создания и отображения данных в <li>:

<div>
    <ul>
        <li ng-repeat="wd in currentPageWorkOrders>
            <a ng-click="viewProject(wd)"  href="">
                <h4>{{wd.name}}</h4>
            </a>
            <p>Publisher Name</p>
        </li>
    </ul>
</div>
Теги:

3 ответа

1
Лучший ответ

Вы можете использовать фильтры по Угловому короче. например, вы можете фильтровать в ng-repeat.

Итак, ваш ng-repeat будет примерно таким:

<li ng-repeat="wd in elements | filter:search">
  <a ng-click=" viewProject(wd) " href=" ">
    <h4>{{wd.name}}</h4
  </a>
  <p>Status: {{wd.status}}</p>
</li>

Где поиск - это новый элемент, в котором вы устанавливаете элементы подгонки. В моем случае я использую:

<span class="btn btn-default" ng-click="search.status=''">No Filters</span>
<span class="btn btn-primary" ng-click="search.status='OPEN'">Show Open</span>
<span class="btn btn-success" ng-click="search.status='IN PROGRESS'">Show In Progress</span>

Вы можете проверить, как это работает, в Plunkr: https://plnkr.co/edit/5V3Rg0lggjnPVFu3srsG?p=preview

Поделиться
  • 0
    Спасибо Хосе. Как мне предоставить нумерацию страниц, скажем, я хочу показать только 10 объектов одним щелчком мыши?
  • 0
    В этом случае вам понадобится второй список. Только с отфильтрованными элементами и выполнять несколько математических операций: иметь страницу, количество страниц. Вы можете проверить этот другой вопрос: stackoverflow.com/questions/11581209/… проверьте Скрипку. Это работает так хорошо! И используйте: <li ng-repeat="item in filteredData | startFrom:currentPage*pageSize | limitTo:pageSize">
1

Вы можете использовать ng-if для фильтрации URL-адреса items.codepen для справки http://codepen.io/nagasai/pen/MeaawO

  <li ng-repeat="wd in currentPageWorkOrders.result" ng-if="wd.status == 'OPEN'">
                          <a ng-click="viewProject(wd)"  href="">
                              <h4  >{{wd}}</h4>

                          </a>

                      </li>

Надеюсь, это полезно для вас

Поделиться
  • 0
    Привет, у меня есть список кнопок на боковой панели, которые называются <button>OPEN</button> , <button>IN PROGRESS</button> и т. Д. Я хочу отображать результаты выше, только когда нажимаю на соответствующие кнопки
  • 0
    Проверьте обновленный URL codepen - codepen.io/nagasai/pen/MeaawO. Надеюсь, это работает для вас :)
1

Вы можете использовать фильтр метод, чтобы отфильтровать необходимые данные

var _getResult = myArray[0].result;
var filterArray = _getResult.filter(function(item){
 return item.status ==="OPEN" || item.status === "IN PROGRESS"

})
console.log(filterArray)

Смотрите этот jsfiddle

Поделиться
  • 0
    Чем результирующий объект отличается от объекта, который я передаю? На его печать выходит тот же объект. Я хочу создать <li > на основе status ключа
  • 0
    Поэтому, если status == open я создам <li>object data</li> а если status==In progress' then another <li> объектные данные </ li> `
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню