Search for data values in JSON object

Question

I want to search through a JSON object which I am fetching from a public api, I have a text input and a button.

My JSON object looks like this

0:{
first_name: "Shkodran"
form: "2.3"
id: 1
news_added: "2020-02-27T23:00:18.104137Z"
points_per_game: "3.2"
second_name: "Mustafi"
web_name: "Mustafi"
minutes: 620
goals_scored: 0
assists: 2
clean_sheets: 2
goals_conceded: 9
own_goals: 0
penalties_saved: 0
penalties_missed: 0  
yellow_cards: 0
red_cards: 0
saves: 0
}

Each entry is a different player and there are 628 entries.

When the button is clicked I would like to be able to search within the data in the JSON object and check whether the data value the user has input exists in the JSON object.

If the input text matches the data value within the JSON the form of the player will logged to the console

HTML

<form id="players">
<input type="text" id ="search_players" placeholder="Search for a player...">
<button type="submit" id="submit" onclick="playersearch()"></button>
</form>

Javascript

const input = document.getElementById('search_players');

const searchfield = "first_name" + "second_name";

playersearch = function() {

var playername = input.value;

for (var i=0 ; i < players.length ; i++)
{
    if (players[i].first_name.second_name.indexOf(playername)) {

        console.log(players[i].form);

    }
}

}

Answer 1

You can have the search fields in an Array, when the user clicks the GamepadButton, map that array to the corresponding values and search for the inputed value in that array

const players = [{
  first_name: "Shkodran",
  form: "2.3",
  id: 1,
  news_added: "2020-02-27T23:00:18.104137Z",
  points_per_game: "3.2",
  second_name: "Mustafi",
  web_name: "Mustafi",
  minutes: 620,
  goals_scored: 0,
  assists: 2,
  clean_sheets: 2,
  goals_conceded: 9,
  own_goals: 0,
  penalties_saved: 0,
  penalties_missed: 0,
  yellow_cards: 0,
  red_cards: 0,
  saves: 0
}];



const searchfields = ["first_name", "second_name"];

playersearch = function() {
  var input = document.getElementById("search_players");
  var playername = input.value;

  for (var i = 0; i < players.length; i++) {
    const data = searchfields.map(k => players[i][k]);
  
    if (data.indexOf(playername) > -1) {
      console.log(players[i].form);
    }
  }
};

<input type="text" id="search_players" placeholder="Search for a player...">
<button onclick="playersearch()">search</button>

Answer 2

hmm i think u have a missconception, in the JSON second_name is not a property of first_name, then u cant access it that way, instead you must access it like this: players[i].first_name, and use a boolean operator, or in this case.

if(players[i].first_name.includes(playername) || players[i].second_name.includes(playername))

sorry for my english. blessings.

Answer 3

The other variant of the previous answer

const players = [{
  first_name: "Shkodran",
  form: "2.23",
  id: 1,
  news_added: "2020-02-27T23:00:18.104137Z",
  points_per_game: "3.2",
  second_name: "Mustafi",
  web_name: "Mustafi",
  minutes: 620,
  goals_scored: 0,
  assists: 2,
  clean_sheets: 2,
  goals_conceded: 9,
  own_goals: 0,
  penalties_saved: 0,
  penalties_missed: 0,
  yellow_cards: 0,
  red_cards: 0,
  saves: 0
}];

playersearch = function() {
  var input = document.getElementById("search_players");
  var playerName = input.value;
  
  players
    .filter(p => p.first_name === playerName || p.second_name === playerName)
    .forEach(p => console.log(p.form));
};

<input type="text" id="search_players" placeholder="Search for a player...">
<button onclick="playersearch()">search</button>

Answer 4

• The Data that you fetch is a JSON object
• Object don't have length and it's not iterable using for loop, You may use for-in loop instead that's the better way

• If you'd like to use for loop find way to make fetch data an array, But it will be an extra task to do. For me this is not the better way

• Base on the details of your question, looks like you would going to check 628 entries

• And you would like to logged it into the console.

• It can be logged, but you can't see it logged in the console. Since you nested your input and button element inside form.

• Browser will clear the console after you submit the form, That's why you can't see it logged in the console.

• Hence I suggest no need to wrapped it with form element so you can see it in the console.

HTML:

<input type="text" id ="search_players" placeholder="Search for a player...">
<button type="submit" id="submit" onclick="playerSearch()">Click Me</button>

JS Code:

// pretend that this the api that you fetch

// user define variable, holds all the data from public api
var players = {
  // One of the individual player from the api
  0: {
    first_name: 'Shkodran',
    form: '2.3',
    id: 1,
    news_added: '2020-02-27T23:00:18.104137Z',
    points_per_game: '3.2',
    second_name: 'Mustafi',
    web_name: 'Mustafi',
    minutes: 620,
    goals_scored: 0,
    assists: 2,
    clean_sheets: 2,
    goals_conceded: 9,
    own_goals: 0,
    penalties_saved: 0,
    penalties_missed: 0,
    yellow_cards: 0,
    red_cards: 0,
    saves: 0
  }
};


const INPUT = document.querySelector('#search_players');

function playerSearch() {
  let playerName = INPUT.value.toLowerCase();
  let didNotExist = true;
  for (const player in players) {
    let searchField = [
      players[player].first_name.toLowerCase(),
      players[player].second_name.toLowerCase()
    ];
    let itExists = searchField.indexOf(playerName) != -1 ? true : false;
    if (itExists) {
      console.log(players[player].form);
      didNotExist = false;
    }
  }
  if (didNotExist) console.log('The name you entered did not exist');
}