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函数即可过滤您的搜索值。也许这不是解决问题的最佳做法，但可以给您解决问题的想法。

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

[System.Management.Automation.Runspaces.PSSession]$LOCAL_LINUX_SESSION = New-PSSession -HostName "root@192.168.211.1:2222" #//Using SSH with PublicKey Login. 
Invoke-Command -Session $LOCAL_LINUX_SESSION -ScriptBlock{
    Write-Host "$ENV:HOME FROM SSH First Context"
    #//Compile Library Here.
    [System.Management.Automation.Runspaces.PSSession]$LOCAL_WINDOWS_SESSION = New-PSSession -HostName "root@192.168.100.4:22" #//Using SSH with PublicKey Login. 
    #//Copy files with "Copy-Item" cmdlet.
    #//Copy-Item -Path "Path-To-Local-Dir" -Destination "Path-To-Windows" -ToSession $LOCAL_WINDOWS_SESSION
}

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())
})

如何使用Javascript过滤外部JSON数据并获取firstName？

2 个答案: