CODEWITHSUNDEEP
jquerytypescript
Learner
Learner

Reputation: 351

Javascript filter array with multiple objects

Hi all I have my JSON as follows

var autoNotifyCategories = {
"notify": [{
    "Category": "Category1",
    "Title": ["Title1", "Title2"],
    "Pending": "true"
  },
  {
    "Category": "Category2",
    "Title": ["Title1"],
    "Pending": "true"
  },
  {
    "Category": "Category3",
    "Title": ["Title1", "Title2", "Title3", "Title4"],
    "Pending": "true"
  },
]

}

I will have my filter as follows 

var filter = {
    Category: 'Category3',
    Title: 'Title4'
};

At title I can pass any based on the requirement but what I need is I would like to filter exactly based on the parameters I passed and return the Pending value from the array. I tired as below but it is checking only for the Category it seems, I need to validate both category and title can some one help me, here is he fiddle I tried

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  //banner.addClass("alt")
  var autoNotifyCategories = {
    "notify": [{
        "Category": "Category1",
        "Title": ["Title1", "Title2"],
        "Pending": "true"
      },
      {
        "Category": "Category2",
        "Title": ["Title1"],
        "Pending": "true"
      },
      {
        "Category": "Category3",
        "Title": ["Title1", "Title2", "Title3", "Title4"],
        "Pending": "true"
      },
    ]
  }
  var filter = {
    Category: 'Category3',
    Title: 'Title4'
  };
  //alert(autoNotifyCategories.notify);
  let s = autoNotifyCategories.notify.filter(function(item) {
    for (var key in filter) {
      if (item[key] === filter[key]) {
        return item.Pending;
      }

    }
  });
  alert(s[0].Pending);
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

Upvotes: 0

Views: 109

Answers (2)

Sachi Tekina
Sachi Tekina

Reputation: 1810

Given that the Title is an array you can use includes for validation.

var autoNotifyCategories = {
  "notify": [{
      "Category": "Category1",
      "Title": ["Title1", "Title2"],
      "Pending": "true"
    },
    {
      "Category": "Category2",
      "Title": ["Title1"],
      "Pending": "true"
    },
    {
      "Category": "Category3",
      "Title": ["Title1", "Title2", "Title3", "Title4"],
      "Pending": "true"
    },
  ]
}

var filter = {
  Category: 'Category3',
  Title: 'Title4'
};
var filtered = autoNotifyCategories.notify.filter((obj) => {
  return (obj.Category === filter["Category"]) && (obj.Title.includes(filter["Title"]))
})

alert(filtered[0].Pending)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Sakthikanth
Sakthikanth

Reputation: 139

Please check your code written in JSfiddle.The array was not matched inittially. The array should be coverted to String for comparison.

Its working now..!

    let s = autoNotifyCategories.notify.filter(function(item) {
    let cnt  = 0,equal = 1;
    for (var key in filter) {
      cnt++;
      equal = (item[key].toString().includes(filter[key].toString()));
      if(equal && cnt == Object.keys(filter).length){
            return item[key];
      }
    }
  });

  if(s.length){
    alert(s[0].Pending)
  }else{
    alert('Not Found');
  }

JS Fiddle : https://jsfiddle.net/3f2Lmjyj/

Upvotes: 1

Related Questions