javascript - 当您将 'print' 发送到屏幕时，如何更改对象属性名称

Question

我有一个对象数组。

allInfo= [{
   firstName: test1,
   middleName: test2,
   lastName:test3,
}
{
firstName: testA,
   middleName: testB,
   lastName:testC,
}];

当我输出到 HTML DOM 时，如何将“firstName”更改为“First Name”？

当前输出是这样的:

firstName: Jeff - middleName: Michael - lastName: Ward

我希望它是:

First Name: Jeff - Middle Name: Michael - Last Name: Ward

我尝试使用 If/Else 语句，但没有成功。我确信对此有一些简单的解决方法。有人可以帮忙吗？谢谢!

我的代码:

function generate(list) {
  var out = '<ul>';

  for (var i in list) {
    var rec = list[i];

    var row = [];
    for (var field in rec) {
        if(field === firstName){ field = "First Name";}
    else if{field === middleName){ field = "Middle Name";}
    else if{field === lastName){ field = "Last Name";}

      row.push(field + ': ' + rec[field]);
    }

    out += "<li>" + row.join('  -  ') + "</li>";
  }

  out += "</ul>"
  document.getElementById('output').innerHTML = out;
  return out;
}

我的整个 JS 文件:

var allInfo = []; //Store names (as objects) here
var output = printList('output');
var cache = [];
var numOfNames = 0;
var nameCounter = 0

alert("JS Works");


function buildList() { //Makes a new object, and pushes it to the 'allInfo' Array
  var info = {};
  info.firstName = document.getElementById('firstName').value;
  info.middleName = document.getElementById('middleName').value;
  info.lastName = document.getElementById('lastName').value;
  allInfo.push(info);
  addName(1);
  clear();
  alert("Logged");

}


function resetList() {
  allInfo = [];
  numOfNames = 0;
  nameCounter = 0;
  addName(0);
  blankOut();
}

function blankOut() {
  document.getElementById('output').innerHTML = " ";
}

//Problem Function
function generate(list) {
  var out = '<ul>';

  for (var i in list) {
    var rec = list[i];

    var row = [];
    for (var field in rec) {
      row.push(field + ': ' + rec[field]);
    }

    out += "<li>" + row.join('  -  ') + "</li>";
  }

  out += "</ul>"
  document.getElementById('output').innerHTML = out;
  return out;
}


function addName(x) {
  if (x > 0) {
    nameCounter++;
    numOfNames = nameCounter;
    document.getElementById('numOfNames').innerHTML = numOfNames;
  } else {
    nameCounter = 0;
    numOfNames = 0;
    document.getElementById('numOfNames').innerHTML = numOfNames;
  }
}

function printList(x) {
  var output = getById(x);
  return function (text) {
    output.innerHTML += text + '\n';
  };
}


function getById(x) {
  return document.getElementById(x);
}


function clear() {
  document.getElementById("firstName").value = "";
  document.getElementById("middleName").value = "";
  document.getElementById("lastName").value = "";
}

Answer 1

在此代码段中:

for (var field in rec) {
  if(field === firstName){ field = "First Name";}
  else if{field === middleName){ field = "Middle Name";}
  else if{field === lastName){ field = "Last Name";}

  row.push(field + ': ' + rec[field]);
}

您应该将对象键(字段)与字符串表示形式进行比较，如下所示:

for (var field in rec) {
  var fieldLabel;

  if (field === 'firstName') { fieldLabel = "First Name"; }
  else if (field === 'middleName') { fieldLabel = "Middle Name"; }
  else if (field === 'lastName') { fieldLabel = "Last Name"; }

  row.push(fieldLabel + ': ' + rec[field]);
}