如何過濾外部 JSON 數據並使用 Javascript 獲取名字？

Question

我只想獲取在輸入字段中輸入的名字的數據。 並渲染搜索到的名稱的 HTML。

$.getJSON("https://www.hatchways.io/api/assessment/students", fetchData);


var input = `<input type="text" placeholder="Search Here">`;

function fetchData(data) {
      const profile = ` <div class="container">
      <p id="input">${input}</p>
            ${data.students
              .map(
                data =>
                  `
                  <div class="profile">
                    <img src="${data.pic}">
                      <div id="display">
                        <h1 id="name" style="font-size:50px">${data.firstName}</h1>
                        <p>Email: ${data.email}</p>
                        <p>Company: ${data.company}</p>
                        <p>Skill: ${data.skill}</p>
                        <p>Grades: ${data.grades}</p></div>
                  </div>`
              )
              .join(" ")}
              </div> </div>`;
      document.body.innerHTML = profile;
}

Answer 1

您只需要添加一個doSearch function 來過濾您的搜索值。 也許這不是解決您的問題的最佳做法，但它會給您解決問題的想法。

var myData = null;
$.getJSON("https://www.hatchways.io/api/assessment/students", fetchData);
var input = `<input id="searchValue" type="text" placeholder="Search Here"><input type="button" value="search" onclick="doSearch()" />`;
function fetchData(data) {
    myData = data;
    renderAllHtml(data);
}
function doSearch() {
    var searchValue = $('#searchValue').val();
    if (searchValue) {
        myData.students.forEach(item=>{
            if (searchValue === item.firstName) {
                renderFilterHtml(item);
            }
        })
    }else {
        renderAllHtml(myData);
    }
}

function renderFilterHtml(data) {
    const profile = ` <div class="container"><p id="input">${input}</p>
    <div class="profile">
            <img src="${data.pic}">
              <div id="display">
                <h1 id="name" style="font-size:50px">${data.firstName}</h1>
                <p>Email: ${data.email}</p>
                <p>Company: ${data.company}</p>
                <p>Skill: ${data.skill}</p>
                <p>Grades: ${data.grades}</p></div>
          </div>
      </div> </div>`;
    document.body.innerHTML = profile;
    $('#searchValue').val(data.firstName);
}

function renderAllHtml(data) {
    const profile = ` <div class="container"><p id="input">${input}</p>
    ${data.students
        .map(
            data =>
                `
          <div class="profile">
            <img src="${data.pic}">
              <div id="display">
                <h1 id="name" style="font-size:50px">${data.firstName}</h1>
                <p>Email: ${data.email}</p>
                <p>Company: ${data.company}</p>
                <p>Skill: ${data.skill}</p>
                <p>Grades: ${data.grades}</p></div>
          </div>`
        )
        .join(" ")}
      </div> </div>`;
    document.body.innerHTML = profile;
}

Answer 2

 const allData = $.get("https://www.hatchways.io/api/assessment/students") // Customise your search function here, perhaps use a RegEx function match(a, b) { return a.toLowerCase().startsWith(b.toLowerCase()) } // This just filters the data using the search function above function getData(search) { const data = allData.responseJSON && allData.responseJSON.students || []; return data.reduce( (acc, s) => match(s.firstName, search)? (acc || []).concat(s): acc, [] ); } // Abstracting this into another function to keep the code clean function renderStudent(data) { return ` <div class="profile"> <img src="${data.pic}"> <div id="display"> <h1 id="name" style="font-size:50px">${data.firstName}</h1> <p>Email: ${data.email}</p> <p>Company: ${data.company}</p> <p>Skill: ${data.skill}</p> <p>Grades: ${data.grades}</p> </div> </div> `; } // Get results when a search is made // Could use `$('#search').on('keyup', function...)` for better response, instead of waiting // for the user to press ENTER $('#search').change(function(e) { $('.results').html(getData($(e.currentTarget).val()).map(renderStudent).join()) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p><input type="text" id="search" placeholder="Search Here" /></p> <div class="results" /> </div>