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);

    }
}

}

Taki · Accepted Answer · 2020-03-12 14:08:59Z

2

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>

answered Mar 12, 2020 at 14:08

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

2 Comments

Sahil Chabria ramchandani Over a year ago

When I click the button it just seems to refresh the page and does not log any value, any idea as to why?

Taki Over a year ago

@SahilChabriaramchandani it's because you're submitting the form, see stackoverflow.com/a/50977830/7328218 to preserve the logs in the console or prevent the form from submitting

José · Accepted Answer · 2020-03-12 14:17:31Z

1

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.

answered Mar 12, 2020 at 14:17

José

1345 bronze badges

Comments

Sergey Kotyushkin · Accepted Answer · 2020-03-13 07:25:04Z

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>

German · Accepted Answer · 2020-03-13 01:11:03Z

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');
}

Collectives™ on Stack Overflow

Search for data values in JSON object

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related