Заменить идентификатор на имя

0

Что у меня есть

У меня есть некоторые данные в формате 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?

  • 0
    Эти данные не действительны в формате JSON. Вы можете проверить это и обновить?

6 ответов

2
Лучший ответ

Вы можете использовать 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>
  • 0
    добавьте пример ng-repeat ;-)
  • 1
    Спасибо за короткий и простой ответ. Я получил его на работу после некоторых экспериментов.
1

Вы можете использовать функцию $.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>
  • 0
    OP запрашивает решение angularJs, я не думаю, что JQuery был на его уме.
  • 0
    @Schuere, это решение вопроса. Что ты сказал? Я не понимаю
Показать ещё 2 комментария
0

простой 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);
}
0

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

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

0

ПОСМОТРЕТЬ

<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

0

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++) {
       	var boss = data[i].boss;
       	var b 	=	eval(i+1);
       	    var bossId = data[i].boss-1;
       	    if(boss){

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


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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню