如何使用 JSON 仅显示 Linda 的详细信息答案

【问题标题】：How do I display only details of Linda using JSON如何使用 JSON 仅显示 Linda 的详细信息
【发布时间】：2019-07-05 04:05:57
【问题描述】：

我想使用 JSON 仅显示 Linda 的详细信息。但是，我对如何做到这一点一无所知。需要一些建议，谢谢！

输出应该只显示更新后的表格，其中包含“Linda”，而不是我当前的输出。

实际问题：使用JSON，修改Linda的手机为88885555，只显示Linda的详细信息。

我的员工对象应该来自 .json 文件，但我找不到要插入这篇文章的格式。因此，我将它合并到我的 .js 文件中。

var employees = [
  {
    "Name": "Tony",
    "Mobile": 99221111,
    "Email": "tony@json.com"
  },
  {
    "Name": "Linda",
    "Mobile": 98981111,
    "Email": "linda@json.com"
  },
  {
    "Name": "Patrick",
    "Email": "patrick@json.com"
  },
  {
    "Name": "Isabella",
    "Mobile": 99552222
  }
];

employees[1].Mobile = 88885555;

function buildHtmlTable() {
  var columns = addAllColumnHeaders(employees);

  for (var i = 0; i < employees.length; i++) {
    var row$ = $('<tr/>');
    
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = employees[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));
    }
    
    $("#employeeTable").append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(employees) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < employees.length; i++) {
    var rowHash = employees[i];
    
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  
  $("#employeeTable").append(headerTr$);

  return columnSet;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onLoad="buildHtmlTable()">
  <table id="employeeTable" border="1"></table>
</body>

【问题讨论】：

你所说的“显示”是什么意思？在过程中的哪个阶段？最初，还是基于用户操作？
嗨，这意味着应该显示更新的表格而不是当前的输出。
是否应该先填充<table>，然后只显示包含"Linda"的行？或者，仅使用与 "Linda" 关联的数据对应的值填充 <table>？
第一个选项，填充所有内容，但只显示包含“Linda”的行
Javascript find json value的可能重复

标签： javascript html arrays json

【解决方案1】：

您可以创建一个接受“员工姓名”.not() 和 .is() 的函数，以匹配 <tr> 中的任何 <td> 元素，其中 .textContent 等于传递给函数的参数链.hide() 将匹配元素的display 设置为"none"。

要显示所有<tr> 元素，您可以使用$("#employeeTable tr").show()。

使用jQuery(function(){}) 替换<body> 元素处的onload 属性事件处理程序。

var employees = [{
    "Name": "Tony",
    "Mobile": 99221111,
    "Email": "tony@json.com"
  },
  {
    "Name": "Linda",
    "Mobile": 98981111,
    "Email": "linda@json.com"
  },
  {
    "Name": "Patrick",
    "Email": "patrick@json.com"
  },
  {
    "Name": "Isabella",
    "Mobile": 99552222
  }
];


employees[1].Mobile = 88885555;

function buildHtmlTable() {
  var columns = addAllColumnHeaders(employees);

  for (var i = 0; i < employees.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = employees[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));
    }
    $("#employeeTable").append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(employees) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < employees.length; i++) {
    var rowHash = employees[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $("#employeeTable").append(headerTr$);

  return columnSet;
}

<!DOCTYPE html>
<html>

<head>
  <title>Task 1</title>

  <!-- using of jquery, calling external js file -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <table id="employeeTable" border="1">
  </table>
  <script>
    $(function() {

      buildHtmlTable();

      function hideRow(employeeName) {
        return $("#employeeTable tr").not(function(index, element) {
          return $(element.cells).is(function(i, el) {
            return el.textContent === employeeName
          });
        }).hide();
      }
  
      hideRow("Linda");

    });
  </script>
</body>

</html>

【讨论】：

不错的答案。我认为您还应该解决== 的使用问题，例如cellValue == null。此外，值得指出的是，在一些 javascript 项目中，variable$ 表示一个可观察对象。我的理解是表示一个 jQuery 对象，最佳实践是$variable....
@cale_b 不同意与 jQuery 对象关联的变量的 $ 前缀。它们只是变量。您在stackoverflow.com/questions/54634343/… 对OP 的评论应该足以说明== 和=== 之间的区别。虽然可以在答案中包含有关差异的注释。
很公平，但我的意思是它们是有意义的约定：stackoverflow.com/questions/37671700/… 和 stackoverflow.com/questions/3360858/… - 你的答案，做你想做的事。
@cale_b “你能指出这是一个 jQuery 约定的引用吗？” stackoverflow.com/questions/3360858/…
没有权威参考，没有。但是有很多“社区”撰写的参考资料。

【解决方案2】：

如果我正确理解了您的问题，您可以像下面那样做。我使用了setTimeout，因此您可以看到从原始输出到更新输出的转换：

function buildTable(arr) {
  let html = "<table border='1' style='width: 100%'>";
  for (let i = 0; i < arr.length; i++) {
    html += `<tr>
      <td>${arr[i].Name   || ''}</td>
      <td>${arr[i].Mobile || ''}</td>
      <td>${arr[i].Email  || ''}</td>
    </tr>`;
  }
  html += "</table>";
  return html;
}

function init() {
  const LINDA_IDX = 1;
  container.innerHTML = buildTable(employees);
  setTimeout(function() { //
    //Update Linda's phone number
    employees[LINDA_IDX].Mobile = 88885555;
    //Show just Linda in the table
    container.innerHTML = buildTable([employees[LINDA_IDX]])
  }, 2000);
}

var employees = [{
  "Name": "Tony",
  "Mobile": 99221111,
  "Email": "tony@json.com"
}, {
  "Name": "Linda",
  "Mobile": 98981111,
  "Email": "linda@json.com"
}, {
  "Name": "Patrick",
  "Email": "patrick@json.com"
}, {
  "Name": "Isabella",
  "Mobile": 99552222
}];

var container = document.querySelector('#container');

init();

After 2 seconds setTimeout will execute showing Linda's updated info:<br />
<div id="container"></div>

【讨论】：