在 Javascript 中按他的名字移动对象的键

Question

我实际上有一个问题，已经有 3 天了，我正在搜索如何通过他的名字移动对象的键，如果没有给出值，则获取对象的第一个值。

但是，问题是我找不到任何答案，你能帮忙吗？

而且，我不想使用 jQuery 或任何库，所有这些都是纯原生 JS
这是 JS 代码：

window.onload = function(){
    var uberTable = document.querySelector('.divTable');
    for(var i in users){
        showDatas(uberTable, users, i)+'<br>';
    }
    var keys = document.querySelector('.headRow');
    showColumns(keys, users, i);
    replaceFirstColumn(users, 3, 0);
};

function showDatas(id, table, iterator){
    id.innerHTML += '<div class="divRow">'+
    '<div class="divCell">'+
    table[iterator].Name + '&nbsp</div><div class="divCell">' +
    table[iterator].Email + '&nbsp</div><div class="divCell">' +
    table[iterator].Gender + '&nbsp</div><div class="divCell">' +
    table[iterator].Age + '&nbsp</div><div class="divCell">' +
    table[iterator].Company +'</div>'
    '</div>';
}

function showColumns(id, table, iterator){
    var obj = Object.keys(table[iterator])
    for(var k in obj){
        id.innerHTML += '<div class="divCell">'+obj[k]+'</div>';
    }
}

数据：

var users = [
    {
      "Name": "Random name",
      "Email": "user@email.com",
      "Gender": "Male",
      "Age": 33,
      "Company": "SUPCompany",
    },
    {
      "Name": "username",
      "Email": "User@email.ca",
      "Gender": "Male",
      "Age": 44,
      "Company": "GolemAi",
    },
    {
      "Name": "Different name",
      "Email": "random@user.ca",
      "Gender": "Male",
      "Age": 23,
      "Company": "SUPCompany",
    },
    {
      "Name": "Nicolas Sarkozy",
      "Email": "niconico@unemployed.prison",
      "Gender": "Male",
      "Age": 50,
      "Company": "Unemployed",
    },
    {
      "Name": "No Idea",
      "Email": "No@Id.ea",
      "Gender": "Female",
      "Age": 20,
      "Company": "The Random Company",
    },
    {
      "Name": "Brigitte Macron",
      "Email": "Brigitte@elysee.dz",
      "Gender": "Female",
      "Age": 180,
      "Company": "Mummy of Manu'",
    },
    {
      "Name": "Corentin Crésus",
      "Email": "tintin@cre.sus",
      "Gender": "Polygender",
      "Age": 500,
      "Company": "Crésus LGBT Corp",
    },
  ];

这是 table 的 CSS 代码：

@import url('https://fonts.googleapis.com/css?family=Marcellus');
@import url('https://fonts.googleapis.com/css?family=Roboto');
body{font-family: 'Roboto', 'Marcellus'}

.divTable
{
    display: table;
    width: auto;
    background-color: #eee;
    border: 1px solid #000;
    border-spacing: 5px;
    border-collapse: separate;
}

.headRow{font-weight: bold}
.headRow > .divCell{background: cyan}

.divRow > .divCell:nth-child(1){
    background: cyan;
    font-style: italic;
}

.divRow
{
   display: table-row;
   width: auto;
}

.divCell
{
    float: left;
    display: table-column;
    text-align: center;
    width: 300px;
    background-color: #ccc;
    border-style: ridge;
    border-width: 1px;
}

和 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Uber Table</title>
</head>
<body>
    <div class="divTable">
        <div class="headRow"></div>
    </div>
    <script src="app.js"></script>
    <script src="db.js"></script>
</body>
</html>

Answer 1

let users = [
    {
      "Name": "Yanis Bendahmane"
    },
    {
      "Name": "Killian Vermersch"
    },
    {
      "Name": "Neil Richter"
    },
    {
      "Name": "Nicolas Sarkozy"
    },
    {
      "Name": "No Idea"
    },
    {
      "Name": "Brigitte Macron"
    },
    {
      "Name": "Corentin Crésus"
    }
  ];


const GET_USER_NAMES = list => {
  return list.map(i => i['Name']).join()
}

let tmpl = `<div>${GET_USER_NAMES(users)}</div>`

console.log(tmpl)

在这里，我们使用 GET_USER_NAMES 方法和 return individual Object' Name 属性的字符串遍历您的用户，然后使用 ES6 template literals 将该列表字符串放入 div.

然后您可以将该 tmpl 字符串变量作为要附加到页面的内容。

注意为了便于阅读，我缩短了用户 obj 数组。

如评论中所述，您的期望不是很清楚，但我已尽力而为。

Answer 2

使用这个函数：

function replaceFirstColumn($firstColIndex = 3, $replacedColIndex = 0){
    var tableRows =  Array.from(document.querySelectorAll('.divRow, .headRow'));

    tableRows.forEach(function(element) {
        var rowCells = Array.from(element.getElementsByClassName('divCell'));

        var aux = rowCells[$firstColIndex].innerHTML;

        rowCells[$firstColIndex].innerHTML =  rowCells[$replacedColIndex].innerHTML;
        rowCells[$replacedColIndex].innerHTML = aux;         
    });
}

Answer 3

给你。 AFAIU 您正在学习 javascript 并且您需要一个简单的代码，以便您可以在当前水平上理解。因此，我尝试尽可能少地更改您的代码。

var users = [ { "Name": "Random name", "Email": "user@email.com", "Gender": "Male", "Age": 33, "Company": "SUPCompany", }, { "Name": "username", "Email": "User@email.ca", "Gender": "Male", "Age": 44, "Company": "GolemAi", }, { "Name": "Different name", "Email": "random@user.ca", "Gender": "Male", "Age": 23, "Company": "SUPCompany", }, { "Name": "Nicolas Sarkozy", "Email": "niconico@unemployed.prison", "Gender": "Male", "Age": 50, "Company": "Unemployed", }, { "Name": "No Idea", "Email": "No@Id.ea", "Gender": "Female", "Age": 20, "Company": "The Random Company", }, { "Name": "Brigitte Macron", "Email": "Brigitte@elysee.dz", "Gender": "Female", "Age": 180, "Company": "Mummy of Manu'", }, { "Name": "Corentin Crésus", "Email": "tintin@cre.sus", "Gender": "Polygender", "Age": 500, "Company": "Crésus LGBT Corp", }, ];   

onload = function(){
     var uberTable = document.querySelector('.divTable');
     for(var i in users){
         showDatas(uberTable, users, i, 'age');
     }
     var keys = document.querySelector('.headRow');
     showColumns(keys, users, i, 'Age');
};

function showDatas(id, table, iterator, first){
     id.innerHTML += '<div class="divRow">'+
     '<div class="divCell ' + (first == 'name' ?   'first' : '') +  '">'+
     table[iterator].Name + '</div><div class="divCell ' + (first == 'email' ?   'first' : '') +  '">' +
     table[iterator].Email + '</div><div class="divCell ' + (first == 'gender' ?   'first' : '') +  '">' +
     table[iterator].Gender + '</div><div class="divCell ' + (first == 'age' ?   'first' : '') +  '">' +
     table[iterator].Age + '</div><div class="divCell ' + (first == 'company' ?   'first' : '') +  '">' +
     table[iterator].Company +'</div>' +
     '</div><br>';
}

function showColumns(id, table, iterator, first) {
    var obj = Object.keys(table[iterator])
    for(var k in obj){
        id.innerHTML += '<div class="divCell ' + (first == obj[k] ?   'first' : '') +  '">'+obj[k]+'</div>';
    }
}

.divRow, .headRow {
  width: 100%;
}

.divCell {
  display: inline;
  border-left: solid 1px;
  padding-right: 5px;
  padding-left: 5px;
}

.first {
  float: left;
}

<div class="headRow">
</div>
<br>
<div class="divTable">
</div>

上面的代码可以用更高级的方式编写。这是一个更高级的版本供您使用。

var users = [ { "Name": "Random name", "Email": "user@email.com", "Gender": "Male", "Age": 33, "Company": "SUPCompany", }, { "Name": "username", "Email": "User@email.ca", "Gender": "Male", "Age": 44, "Company": "GolemAi", }, { "Name": "Different name", "Email": "random@user.ca", "Gender": "Male", "Age": 23, "Company": "SUPCompany", }, { "Name": "Nicolas Sarkozy", "Email": "niconico@unemployed.prison", "Gender": "Male", "Age": 50, "Company": "Unemployed", }, { "Name": "No Idea", "Email": "No@Id.ea", "Gender": "Female", "Age": 20, "Company": "The Random Company", }, { "Name": "Brigitte Macron", "Email": "Brigitte@elysee.dz", "Gender": "Female", "Age": 180, "Company": "Mummy of Manu'", }, { "Name": "Corentin Crésus", "Email": "tintin@cre.sus", "Gender": "Polygender", "Age": 500, "Company": "Crésus LGBT Corp", }, ];   

onload = function(){
    showDatas('Age');
    showColumns('Age');
};

function showDatas(first){
    users.map((user)=> document.querySelector('.divTable').innerHTML += 
        '<div class="divRow">' + 
        Object.keys(user).reduce((acc, key)=>
            acc +='<div class="divCell ' + (first == key ?   'first' : '') +  '">'+  user[key] + '</div>', '') + 
        '</div><br>')
}

function showColumns(first) {
    Object.keys(users[0]).map((col)=>
        document.querySelector('.headRow').innerHTML += 
            '<div class="divCell ' + (first == col ?   'first' : '') +  '">' + col + '</div>');
}

.divRow, .headRow {
  width: 100%;
}

.divCell {
  display: inline;
  border-left: solid 1px;
  padding-right: 5px;
  padding-left: 5px;
}

.first {
  float: left;
}

<div class="headRow">
</div>
<br>
<div class="divTable">
</div>

在 Javascript 中按他的名字移动对象的键

Move keys of an objects by his name in Javascript

javascript

ecmascript-5