如何使用json进行搜索并以html的搜索结果显示选定的项目详细信息？

Question

I have a json file called default.json. In search project name or project id in search field. Selected result form search box should show project details and get selected side bar project name.

here is the result showed in json:

    "projects": [
    {
        "instances": null,
        "name": "decodingideas",
        "projectid": "decodingideas-147616",
        "projectnumber": 334691107943,
        "orgid": "",
        "orgname": "",
        "parentid": "",
        "parenttype": ""
    },
    {
        "instances": null,
        "name": "pupil-workers",
        "projectid": "pupil-workers",
        "projectnumber": 455648594684,
        "orgid": "",
        "orgname": "",
        "parentid": "",
        "parenttype": ""
    },

Search box html code:

  <nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0" 
  style="background-color:#3B78E7">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0"  href="#">GCP Projects</a>
  <input class="form-control form-control-dark w-100" type="text" 
placeholder="Search" aria-label="Search">
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="#">Sign out</a>
    </li>
  </ul>
</nav>

Here is the screenshot which i needed:

here is the screenshot 2

Answer 1

You can use Lodash . It is easy to use and very helpful library.