Javascript filter array with multiple objects

Question

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>

Please include relevant code directly into your question, not just as a link to an external service. — C3roe
– C3roe, Commented May 15, 2018 at 11:00
Your problem is that you are returning the item inside your loop over those filter properties, as soon as you find the first match. You need to replace this with a flag that gets modified accordingly inside the loop, and then return the item (or not) after the loop, based on that flag. — C3roe
– C3roe, Commented May 15, 2018 at 11:01
Some one has given this answer let filtered = autoNotifyCategories.notify.filter(e => e.Category === filter.Category && e.Title.includes(filter.Title)); which is working but I am getting an error as Property 'includes' does not exist on type 'string[]' — Learner
– Learner, Commented May 15, 2018 at 12:09
You can use indexOf instead to check whether the title contains a specific string. (Careful with what the return value of that method means.) — C3roe
– C3roe, Commented May 15, 2018 at 12:11
It is always returning value even if the condition doesn't matches — Learner
– Learner, Commented May 15, 2018 at 12:16

Sachi Tekina · Accepted Answer · 2018-05-15 12:49:52Z

2

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>

answered May 15, 2018 at 12:49

Sachi Tekina

1,8105 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Learner Over a year ago

Hi I tried this but as said I am getting an error in type script as Property 'includes' does not exist on type 'string[]

Sachi Tekina Over a year ago

Have you take a look at this: stackoverflow.com/questions/40545329/…

Sakthikanth · Accepted Answer · 2018-05-15 12:33:22Z

1

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/

edited May 15, 2018 at 12:33

answered May 15, 2018 at 12:00

Sakthikanth

1397 bronze badges

6 Comments

Learner Over a year ago

No luck still the same

Sakthikanth Over a year ago

Replace === by includes .Its working jsfiddle.net/3s86f2kg/18

Learner Over a year ago

as said include is giving me the following error in type script Property 'includes' does not exist on type 'string[]'

Sakthikanth Over a year ago

Let us continue this discussion in chat.

Learner Over a year ago

Can we simplify this in one line, I tried with having ! symbol but didn't worked if (item[key].toString().includes(filter[key].toString())) { }else{ equal = 0; }

|

Collectives™ on Stack Overflow

Javascript filter array with multiple objects

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related