Question

我有一个对象数组。

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

当我将'firstName'输出到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]);
}

您应该将对象键（字段）与String表示进行比较，如下所示：

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]);
}

Answer 2

您可以使用对象将字段名称映射到标签，如下所示：

var labels = { "firstName": "First Name", "middleName": "Middle Name", "lastName": "Last Name"};
var field;

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

Answer 3

使用toUpperCase大写第一个字符，并使用正则表达式[A-Z]在每个大写字母前插入一个空格。

str[0].toUpperCase() + str.substr(1).replace(/[A-Z]/g, ' $&')

当您“打印”到屏幕时，如何更改对象属性名称

3 个答案: