使用Vanilla JavaScript搜索对象数组

Question

I'm 9 weeks into learning to program and I'm attempting to get into Hack Reactor. Currently I've hit a complete wall with a website I'm building and was hoping you might be able to help me (several days of testing and combing the internet - my previous strategy for getting around blocks - has proven fruitless).

In summary, I have an array of objects, each object is a teaching strategy which contains five properties. My goal is to add a search function that iterates over every object looking for keywords so a teacher could search the array of strategies. Currently I'm using the .map method to iterate a function over each object that checks the "tags" property for the keyword but for some reason or another I can't get the function to access "tags".

I've created a JSFiddle for you to check out: https://jsfiddle.net/jnemec/4ps8rLLx/

var myIdeas = [

   {name: "Choral",
   image: "img/xideas/choral.jpg",
   grade: [1, 9, 9],
   theory: "Theory:" + "<br>" + "Coming Soon.",
   tags: ["CFU", "literacy"]},

   {name: "Highlighters",
   image: "img/xideas/highlighters.jpg",
   grade: [2, 2, 3],
   theory: "Theory:" + "<br>" + "Coming Soon.",
   tags: ["manipulative", "differentiation"]},

];

var input = "literacy"

var output = myIdeas.map(function(input) {
   if (input == "tags") {
      output += "name";
   } else {
      return "no matches, please try again";}
});

Last thing - Hack Reactor requires my project use only vanilla JavaScript (no frameworks - which from what I've read would make this task easier).

Answer 1

Unless you know why you're doing it, in this case you shouldn't be map() 'ing, you should be filter() 'ing. The way you have this written right now isn't making good use of map() -- you might as well be using forEach() . And what you're returning from the callback doesn't make sense and isn't going to be accessible in a sensible way to detect and report to the user (although you could just use the value of output to detect the same condition).

Read about map() , filter() , and forEach() and think about how they apply to this situation and what kind of output you need.

In each invocation of the callback input is the object, so if you want to access the tags it'd be input.tags . If you want to access the outer input (your search term) you need to name one of them differently.

var input = "literacy";

// `input` here declares a variable name that will be set to the current
// element of the array during each invocation of the callback.
var output = myIdeas.map(function(input) {
  // `input` now refers to the argument to this function. You've shadowed the
  // outer var of the same name and can no longer access it.
  // `input` is now an object from the array. If you want to access a prop like
  // `tags`, it's `input.tags`;
  if (input == "tags") {
    output += "name";
  } else {
    return "no matches, please try again";}
});