Question

进行JS练习：我知道它必须非常简单，但是我无法弄清楚。我已经从JSON文件创建了一个表，并设法创建了一个包含所需元素的表。现在，我必须将文件中“ URL”字段中的链接添加到表中的“ first_name”元素中。我知道我必须使用href“””，我想我必须创建一个函数来仅识别“ first_name”并添加链接。

这是在我的JS文件顶部使用JSON文件创建的VAR数据

var data = {
   "status":"OK",
   "copyright":" Copyright (c) 2019 Pro Publica Inc. All Rights Reserved.",
   "results":[
      {
         "congress": "113",
         "chamber": "Senate",       
         "num_results": 105,
         "offset": 0,
         "members": [
              {
                 "id": "A000360",
                 "title": "Senator, 2nd Class",
                 
                 "first_name": "Lamar",
                 "party": "R",
                 "twitter_account": "SenAlexander",
                 "seniority": "11",
                 "phone": null,
                 "fax": null,
"url": "https://www.alexander.senate.gov/public",
                 "state": "TN",
             
                           {
                 "id": "A000368",
                 "title": "Senator, 3rd Class",
                 "first_name": "Kelly",
                 "party": "R",

//...the list goes on

这是使用变量中的某些元素创建表的功能：

function createTable(tbody, data, field) {  
  for (var i = 0; i < data.length; i++) {
    var row = document.createElement("tr");
    tbody.appendChild(row);
    
    for (var j = 0; j < field.length; j++) {
      var cell = document.createElement("td");
    var texto = document.createTextNode(data[i][field[j]])
      row.appendChild(cell);
      cell.appendChild(texto)
    }
  }
}

createTable(
  document.getElementById("senate-data"), data.results[0].members, 
  ["first_name", "party", "state", "seniority", "votes_with_party_pct"]
);

我想找到一种方法，根据我的水平（总入门者），将这些URL从“ URL”添加到列表中的“ first_name”字段。

或者至少给我一个例子，以便我可以使用它。

Answer 1

由于没有CreateHtmlNode可用，因此您将需要使用.innerHTML。

我更改了功能，添加了一个附加参数，期望该对象具有字段“ linkField”（持有链接的目标）和“ urlField”（JSON响应中的“超链接”字段）：

function createTableWithLink(tbody, data, field, urlInfo) {
  var texto;

  for (var i = 0; i < data.length; i++) {
    var row = document.createElement("tr");
    tbody.appendChild(row);

    for (var j = 0; j < field.length; j++) {
      var cell = document.createElement("td");
      if (field[j] === urlInfo.linkField) {
        cell.innerHTML = '<a href="' + data[i][urlInfo.urlField] + '">' +
          data[i][field[j]] + '</a>';

      } else {
        cell.innerHTML = data[i][field[j]];
      }
      row.appendChild(cell);
    }
  }
}

createTableWithLink(
  document.getElementById("senate-data"), data.results[0].members, 
  ["first_name", "party", "state", "seniority", "votes_with_party_pct"], 
  {
    linkField: "first_name",
    urlField: "url"
  }
);

这是显示更改的Fiddle。

一般说明：

由于您是初学者，希望您不要介意建议。我建议坚持使用分号结尾，即使不是必需的。还要注意行的缩进，因为这将帮助您和您的团队成员更快地进入代码。结构良好的代码很漂亮：-）

在评论中回答您的问题：

1。）附加对象作为参数：

在Javascript中，对象包含在{}中，并包含fieldName: "value"（或JSON中需要的"fieldName": "value"形式的字段和值）。对象可以非常自由地构造，并且可以包含其他对象，数组或简单数组。这是bit of reading，显示了初始化对象的不同方法。

还有更多关于对象的方法，但是应该从头开始。

我个人喜欢在对象内部定义变量组，因为这允许我访问通过其给定名称包含的变量，例如与urlInfo.linkField方法中的createTableWithLink()相同。如果我使用的是数组，那么如果我使用了数字键数组，则应该像urlInfo[0]一样。

2。）改用var linkField = getElementById("first_name")：

首先：getElementById(ELEMENT)将从当前HTML文档中简单地返回具有给定ID的对象，因此在我们的情况下，我们正在使用包含所有不适合使用的数据的JSON结构。

如果您有一个用于加载JSON的按钮，则可以动态定义JSON响应中URL和link列的两个输入字段，并将它们添加为参数：

<label>Link to be added to: <input type="text" id="link_field" value="first_name"/></label>
<label>Field should be linked to: <input type="text" id="url_field" value="url"/></label>
<input type="button" onclick="createTableOnButtonClick()" value="Create table"/>

// call the original function, pass in the values from the input fields:
function createTableOnButtonClick() {
    createTableWithLink(
      document.getElementById("senate-data"), data.results[0].members, 
      ["first_name", "party", "state", "seniority", "votes_with_party_pct"], 
      {
        linkField: document.getElementById("link_field").value,
        urlField: document.getElementById("url_field").value
      }
    );
}

如果不需要字段的任何动态定义，则始终可以对值进行硬编码并在函数内部进行检查，但是我建议您不要这样做，因为您还可以动态传递字段。为了完整起见，这将是带有硬编码检查的函数版本：

// the URL definition parameter has been reduced as they are now hard-coded
function createTableWithLink(tbody, data, field) {
  var texto;

  for (var i = 0; i < data.length; i++) {
    var row = document.createElement("tr");
    tbody.appendChild(row);

    for (var j = 0; j < field.length; j++) {
      var cell = document.createElement("td");
      // hard-coded checking for field "first_name"
      if (field[j] === "first_name") {
        cell.innerHTML = '<a href="' + data[i]["url"] + '">' +
          data[i]["first_name"] + '</a>';

      ...

3。）何时使用方括号（[]）或点语法（.property）？

数组是对象的一种特殊类型，因此您也可以使用"Property accessors"访问数组。

Here is a very good Stack Overflow Q&A关于使用不同符号访问对象和数组。

基本上，如果您具有字符串形式的键，则始终可以使用属性访问器，但是始终可以使用与索引类型无关的数组访问器：

var numArr= [20, "Test"];
var stringArray= [];
stringArray["testValue"]= "4711";
stringArray["anotherValue"]= "0815";

console.log(numArr[0]);
console.log(stringArray.testValue);
console.log(stringArray["anotherValue"]);

// won't work:
console.log(numArr.0);

从另一个表元素添加到表元素的链接

1 个答案: