Заменить Id с именем

Question

То, что я

У меня есть некоторые данные в формате JSON, как это:

var data = [{id: 1, name="AB", designation=1}, 
      {id: 2, name="CD", boss= 1, designation=2}, 
      {id: 3, name="EF", boss= 1, designation=2}, 
      {id: 4, name="GH", boss= 1, designation=2}, 
      {id: 5, name="IJ", boss= 2, designation=3}, 
      {id: 6, name="KL", boss= 3, designation=3}, 
      {id: 7, name="MN", boss= 3, designation=3}, 
      {id: 8, name="OP", boss= 7, designation=4}, 
      {id: 9, name="QR", boss= 3, designation=3}, 
      {id: 10, name="ST", boss= 1, designation=2}]; 

var designations = [{id: 1, name: "Principle"}, 
        {id: 2, name: "HOD"}, 
        {id: 3, name: "Teacher"}, 
        {id: 4, name: "Student"}]; 

В приведенных выше данных обратите внимание, что босс поле ссылается на тот же массив, а обозначение ссылается на другой массив.

Я хочу

Я хочу, чтобы показать эти данные в таблице:

id | name | boss | designation 
---+------+------+------------ 
1 | AB | SUP | Principle 
2 | CD | AB | HOD 
3 | EF | AB | HOD 
4 | GH | AB | HOD 
5 | IJ | CD | Teacher 
6 | KL | EF | Teacher 
7 | MN | EF | Teacher 
8 | OP | MN | Student 
9 | QR | EF | Teacher 
10 | ST | AB | HOD 

Что я планировал

Сейчас я показываю упомянутую выше таблицу с помощью JavaScript. Теперь я планирую изучить и реализовать тот же пример, используя Angular.js. Есть ли что-нибудь в построении для angularjs, чтобы делать такие вещи? Если нет, то, пожалуйста, скажите мне, как мне это сделать с помощью javascript?

Answer 1

Вы можете использовать data.map(...), чтобы сделать проекцию в формате, который вам нужно показать в таблице.

Например, вы могли бы сделать что-то вроде:

$scope.tableContent = data.map(function(d) { return new { 
    id: d.id, 
    name: d.name, 
    boss: data.filter(function(x) {return x.id == d.boss; })[0], 
    designation: designations.filter(function(des) { des.id == d.designation; })[0]; 
}); 

Или что-то подобное. Затем вы просто привязываете tableContent к ng-repeat и визуализируете HTML как хотите с угловым.

Что-то вроде этого:

<table> 
    <tr ng-repeat='row on tableContent'> 
     <td>{{row.id}}</td> 
     <td>{{row.name}}</td> 
     <td>{{row.boss.name}}</td> 
     <td>{{row.designation.name}}</td> 
    </tr> 
</table> 

Answer 2

Вы можете использовать $.grep функцию:

$scope.getDesignation = function (Id) { 
     return jQuery.grep(designations, function (a) { 
      return a.Id == Id; 
     })[0].name; 
    } 

Позвони getDesignation функцию от HTML.

Пример:

<table> 
    <thead> 
     <tr> 
      <th>id</th> 
      <th>name</th> 
      <th>boss</th> 
      <th>designation</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in data"> 
      <td>{{ item.id }}</td> 
      <td>{{ item.name }}</td> 
      <td>{{ item.boss }}</td> 
      <td>{{ getDesignation(item.designation) }} </td> 
     </tr> 
    </tbody> 
</table> 

Answer 3

var data = [{id: 1, name: "AB", designation: 1}, 
 
      {id: 2, name: "CD", boss: 1, designation: 2}, 
 
      {id: 3, name: "EF", boss: 1, designation: 2}, 
 
      {id: 4, name: "GH", boss: 1, designation: 2}, 
 
      {id: 5, name: "IJ", boss: 2, designation: 3}, 
 
      {id: 6, name: "KL", boss: 3, designation: 3}, 
 
      {id: 7, name: "MN", boss: 3, designation: 3}, 
 
      {id: 8, name: "OP", boss: 7, designation: 4}, 
 
      {id: 9, name: "QR", boss: 3, designation: 3}, 
 
      {id: 10, name: "ST", boss: 1, designation: 2}]; 
 

 
var designations = [{id: 1, name: "Principle"}, 
 
        {id: 2, name: "HOD"}, 
 
        {id: 3, name: "Teacher"}, 
 
        {id: 4, name: "Student"}]; 
 
       
 

 

 
for (var i = 0; i < data.length; i++) { 
 
     \t var boss = data[i].boss; 
 
     \t var b \t = \t eval(i+1); 
 
     \t  var bossId = data[i].boss-1; 
 
     \t  if(boss){ 
 

 
     \t \t \t var bossName = data[bossId].name; 
 
     \t  } 
 
     \t \t var name \t = \t data[i].name; 
 
     \t \t var designationId = data[i].designation; 
 
     \t \t var designationName = designations[designationId-1].name; 
 

 

 
     \t if(!boss){ 
 
      $("#test tbody").append("<tr><td>"+(b)+"</td><td>"+name+"</td><td>SUP</td><td>"+designationName+"</td></tr>"); 
 
     
 
     \t } else { 
 
     \t \t $("#test tbody").append("<tr><td>"+(b)+"</td><td>"+name+"</td><td>"+bossName+"</td><td>"+designationName+"</td></tr>"); 
 
     \t } 
 

 
     } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="test"> 
 
<thead> 
 
\t <tr> 
 
\t \t <th>id</th> 
 
\t \t <th>name</th> 
 
\t \t <th>boss</th> 
 
\t \t <th>designation</th> 
 
\t </tr> 
 
</thead> 
 
<tbody> 
 
\t 
 
</tbody> 
 
</table>

Answer 4

ВИД

<html ng-app="app"> 

    <div ng-controller="myCtrl as vm"> 
    <div ng-repeat="item in data"> 
     {{item.name}} 
     <br/> Designation : {{getDesignationById(item.designation).name}} 
     <br/> 
     <br/> 
    </div> 
    </div> 

</html> 

КОНТРОЛЛЕР

var app = angular.module('app', []) 



// controller 
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) { 
    $scope.data = [{ 
    'id': 1, 
    'name': "AB", 
    'designation': 1 
    }, { 
    'id': 2, 
    'name': "AC", 
    'designation': 2 
    }, { 
    'id': 3, 
    'name': "ER", 
    'designation': 3 
    }, { 
    'id': 4, 
    'name': "TG", 
    'designation': 4 
    }] 

    var designations = [{ 
    'id': 1, 
    'name': "Principle" 
    }, { 
    'id': 2, 
    'name': "HOD" 
    }, { 
    'id': 3, 
    'name': "Teacher" 
    }, { 
    'id': 4, 
    'name': "Student" 
    }]; 

    $scope.getDesignationById = function(id) { 
    return $filter('filter')(designations, { id: id })[0]; 
    } 

}]); 

JSFIDDLE

Answer 5

Вы можете сделать что-то вроде этого:

var dataMap = data.reduce((p, c) => {p[c.id] = c.name; return p;}, {}); 
var designationsMap = designations.reduce((p, c) => {p[c.id] = c.name; return p;}, {}); 

data.forEach((v) => { 
    if(v.boss && dataMap[v.boss]){ 
     v.boss = dataMap[v.boss]; 
    } 
    if(v.designation && designationsMap[v.designation]){ 
     v.designation = designationsMap[v.designation]; 
    } 
}); 

var app = angular.module("app", []); 
app.controller("mainController", mainController); 
function mainController($scope){ 
    $scope.data = data; 
} 

И HTML:

<table> 
<thead> 
    <tr> 
    <th>id</th> 
    <th>name</th> 
    <th>boss</th> 
    <th>designation</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="item in data track by $index"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.boss}}</td> 
    <td>{{item.designation}}</td> 
    </tr> 
</tbody> 
</table> 

DEMO

Answer 6

скольжения JS (без jQuery необходимо)

Сначала смените массив данных на переносимые значения.

затем заполнить строки таблицы

var data = [{id: 1, name:"AB", boss= 0, designation:1}, 
      {id: 2, name:"CD", boss: 1, designation:2}, 
      {id: 3, name:"EF", boss: 1, designation:2}, 
      {id: 4, name:"GH", boss: 1, designation:2}, 
      {id: 5, name:"IJ", boss: 2, designation:3}, 
      {id: 6, name:"KL", boss: 3, designation:3}, 
      {id: 7, name:"MN", boss: 3, designation:3}, 
      {id: 8, name:"OP", boss: 7, designation:4}, 
      {id: 9, name:"QR", boss: 3, designation:3}, 
      {id: 10, name:"ST", boss: 1, designation:2}]; 

var designations = [{id: 1, name: "Principle"}, 
        {id: 2, name: "HOD"}, 
        {id: 3, name: "Teacher"}, 
        {id: 4, name: "Student"}]; 

for(var key in data){ 
    for(var id in designations){ 
    if(designations[id].id == data[key].designation){ 
     data[key].designation = designations[id].name; 
     break; 
    } 
    } 

    for(var id in data){ 
    if(data[id].id == data[key].boss){ 
     data[key].boss = data[id].name; 
     break; 
    } 
    } 
} 

var table = new Array(); 
var row = new Array(); 
for(var key in data[0]){ 
    row.push(key); 
} 
table.push(row); 

for(var index in data){ 
    row = new Array(); 
    for(var column in data[index]){ 
     row.push(data[index][column]); 
    } 
    table.push(row); 
}