Je cherche à configurer une entrée de recherche simple qui vérifie un fichier json.

Mon code actuel est le suivant, cela ne fonctionne pas, car chaque parent json a un nom. si je supprime les noms "json1"/"json2", cela fonctionne.

var dataArr = [{
  "json1": {
      "car": "honda",
      "id": "0123",
      "name": "jim"
  },
  "json2": {
      "car": "toyota",
      "id": "0124",
      "name": "james"
  }
}];


$("#search").on('keypress keyup change input', function() {
    var arrival = $(this).val().toLowerCase();
    $('#matches').text(!arrival.length ? '' :
        dataArr.filter(function(place) {
            
            return (place.name.toLowerCase().indexOf(arrival) !== -1);
        }).map(function(place) {
            
            return place.name;
        }).join('\n'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>this does not work. because i have parent names for my json structure</b>
<input id="search" type="text" placeholder="Search term">
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>

Et voici un exemple de code qui fonctionne, si je supprime le "nom" du parent json

var dataArr = [{
      "car": "honda",
      "id": "0123",
      "name": "jim"
  },
{
      "car": "toyota",
      "id": "0124",
      "name": "james"
  }];


$("#search").on('keypress keyup change input', function() {
    var arrival = $(this).val().toLowerCase();
    $('#matches').text(!arrival.length ? '' :
        dataArr.filter(function(place) {
            return (place.name.toLowerCase().indexOf(arrival) !== -1);
        }).map(function(place) {
            return place.name;
        }).join('\n'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>this should work</b>
<input id="search" type="text" placeholder="Search term">
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>

Que puis-je faire pour que mon meilleur exemple json fonctionne ? car j'ai un énorme json avec plusieurs identifiants définis comme nom de parent.

3
Mic 11 mars 2019 à 08:50

2 réponses

Meilleure réponse

Convertissez simplement le premier tableau d'extraits comme le deuxième tableau d'extraits. en utilisant Object.values()

var dataArr = [{ "json1": { "car": "honda", "id": "0123", "name": "jim" }, "json2": { "car": "toyota", "id": "0124", "name": "james" } }];

dataArr = Object.values(dataArr[0]);
$("#search").on('keypress keyup change input', function() {
  var arrival = $(this).val().toLowerCase();
  $('#matches').text(!arrival.length ? '' :
    dataArr.filter(function(place) {
      return (place.name.toLowerCase().indexOf(arrival) !== -1);
    }).map(function(place) {
      return place.name;
    }).join('\n'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>this does not work. because i have parent names for my json structure</b>
<input id="search" type="text" placeholder="Search term">
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>
3
prasanth 11 mars 2019 à 05:58

Vous pouvez utiliser Object.values

var dataArr = [{
  "json1": {
    "car": "honda",
    "id": "0123",
    "name": "jim"
  },
  "json2": {
    "car": "toyota",
    "id": "0124",
    "name": "james"
  }
}];


$("#search").on('keypress keyup change input', function() {
  var arrival = $(this).val().toLowerCase();
  let filterVal = filteredVal(arrival);
  let car = filterVal[0] ? filterVal[0].car : ''
  $('#matches').text(!arrival.length ? '' : car);

})

function filteredVal(searchedName) {
  let getKeys = Object.values(dataArr[0]).filter(function(elem) {
    return elem.car == searchedName;
  });
  return getKeys;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text" placeholder="Search term">
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>
1
brk 11 mars 2019 à 06:06