Question

我希望建立一个简单的搜索输入来检查json文件。

我当前的代码是这个，它不起作用，因为每个json父对象都有一个名称。如果我删除名称“ json1” /“ json2”，它将起作用。

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>

如果我删除父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>

我该怎么做才能使我的顶级json示例正常工作？因为我有一个巨大的json，并且将多个ID设置为父名称。

Answer 1

像第二个代码片段数组一样简单地转换第一个代码片段数组。使用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>

Answer 2

您可以使用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>

使用输入搜索json

2 个答案: