получить метод в виде данных JSON в Angularjs и как его использовать

Question

получить метод в виде данных JSON в Angularjs и как его использовать

0

Я работал над графиком ui, который берет данные из моего json и показывает это. Мой json файл - job.json

  {
        "days": [{
          "dayname": "Sun,23 Aug 2015",
          "date": "2015-08-23",
          "hours": "hoursArray()"
        }, {
          "dayname": "Mon,24 Aug 2015",
          "date": "2015-08-24",
          "hours": "hoursArray()"
        }, {
          "dayname": "Tue,25 Aug 2015",
          "date": "2015-08-25",
          "hours": "hoursArray()"
        }, {
          "dayname": "Wed,26 Aug 2015",
          "date": "2015-08-26",
          "hours": "hoursArray()"
        }]

в котором hoursarray() является методом, но при использовании его в моем коде в качестве выражения его не дает никакого результата, как когда я давал жестко заданное значение в контроллере angularjs. поэтому, пожалуйста, если бы вы могли сказать мне, как передать метод hourarray() в моем angularjs

код для моего файла angularjs

var myApp = angular.module("myDashboardApp", []);
var array24 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
myApp.controller("mainController", function($scope,$http) {
	
		$http.get("job.json")
  .success(function(response) {
$scope.big = response;
});
	
	$scope.addition = function(index, add) {
		return Number(index) + Number(add);
	};
});

$(document).ready(function() {
	$("#scheduleApp").schedule();
});
function hoursArray(from) {
	var output = [];
	for (var i in from) {
		output.push(zeropreffix(i));
	}
	return output;
}

function zeropreffix(i) {
	return (String(i).match(/^[0-9]$/)) ? "0" + i : i;
}

function flightTime( hours) {
	var output = [];
	for (var i in hours) {
		if (i != 0 && i % 2 == 0) {
			output.push({
				breakhours : {
					station : "COK"
				}
			});
		} else {
			output.push({
				timing : {
					real : {
						start : zeropreffix(i) + ":00",
						end : zeropreffix(i) + ":59",
						code : "EK531"
					},
					actual : {
						start : zeropreffix(i) + ":00",
						end : zeropreffix(i) + ":59",
						code : "EK531"
					}
				}
			});
		}

	}
	return output;
}

EDIT Это html, который я использую, вы можете видеть, что я вставляю часы в файл <>:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>Dashboard</title>
		<meta name="description" content="">
		<meta name="author" content="USER">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">

		<link rel="stylesheet" type="text/css" href="theme.css" />
	</head>
	<body  ng-app="myDashboardApp">
		<div class="section-main">
			<div class="schedule" id="scheduleApp"  ng-controller="mainController">
			
				<div class="schedule-row">
					<div class="schedule-route pad0px border-r-dark-blue-fade">
						<div class="schedule-table schedule-field-head bg-dark-blue" data-row="0">
							<span class="schedule-cell"> UTC </span>
							<span class="schedule-cell text-linetight text-center"> <span>+</span> <span>-</span> </span>
							<span class="schedule-cell">00:00</span>
						</div>
						<div class="schedule-table schedule-field-head" ng-repeat="route in big.route" data-row="{{addition($index,1)}}">
							<span class="schedule-cell bg-{{route.stylename}}">{{route.name}}</span>
							<span class="schedule-cell text-center bg-{{route.stylename}}"><span class="circle-icon" ng-hide="!route.info.icon"><i class="fa {{route.info.icon}}"></i></span></span>
						</div>
					</div>
					<div class="schedule-content valign-top pad0px">
						<div class="schedule-content-inner" id="scheduleContentInner">
							<div class="schedule-drag-wrap">
								<div class="schedule-current-time-marker">
									<span class="schedule-time-marker-pills">00:00</span>
								</div>
								<div class="schedule-h-divider" ng-repeat="dayitem in big.days" data-divider="{{$index}}"></div>
								<div class="schedule-table row-minh bg-dark-blue"  data-row="0" id="scheduleAllDays">
									<div class="schedule-cell pad0px after-left-border" ng-repeat="dayitem in big.days" data-row="{{addition($index,1)}}" data-date="{{dayitem.date}}">
										<div class="schedule-row">
											<div class="schedule-dayname pad-y10px pad-l20px">
												{{dayitem.dayname}}
											</div>
										</div>
										<div class="schedule-row border-t-dark-blue-fade">
											*<span class="schedule-cell schedule-hours" ng-repeat="hour in dayitem.hours" data-col-hours="{{hours}}"> {{hour}} </span>*
										</div>
									</div>
								</div>
								<div class="schedule-table row-minh schedule-pills-container" ng-repeat="route in big.route"  data-row="{{addition($index,1)}}" data-flight-row="flight-{{addition($index,1)}}">
									<div class="schedule-cell">
										<div class="schedule-block">
											<div class="schedule-cell pad0px" ng-repeat="flight in route.flight" >
												<div class="schedule-table bg-{{flight.timing.real.color}} radius2px" ng-if="flight.timing.real" data-flight-record="duration~{{flight.timing.real.duration}}|start~{{flight.timing.real.start}}|end~{{flight.timing.real.end}}">
													<span class="schedule-cell pad-r0px" ng-if="flight.timing.real.start">{{flight.timing.real.start}}</span>
													<span class="schedule-cell pad-r0px" ng-if="flight.timing.real.code">{{flight.timing.real.code}}</span>
													<span class="schedule-cell pad-r0px" ng-if="flight.timing.real.end">{{flight.timing.real.end}}</span>
												</div>
												<div class="schedule-table text-center" ng-if="flight.breakhours" data-flight-record="duration~{{flight.breakhours.duration}}|start~{{flight.breakhours.start}}|end~{{flight.breakhours.end}}">
													<span class="pad-x2px">{{flight.breakhours.station}}</span>
												</div>
											</div>
										</div>
										<div class="schedule-table autowidth">
											<div class="schedule-cell pad0px" ng-repeat="flight in route.flight" >
												<div class="schedule-table bg-{{flight.timing.actual.color}} radius2px" ng-if="flight.timing.actual" data-flight-record="duration~{{flight.timing.actual.duration}}|start~{{flight.timing.actual.start}}|end~{{flight.timing.actual.end}}">
													<span class="schedule-cell pad-r0px" ng-if="flight.timing.actual.start">{{flight.timing.actual.start}}</span>
													<span class="schedule-cell pad-r0px" ng-if="flight.timing.actual.code">{{flight.timing.actual.code}}</span>
													<span class="schedule-cell pad-r0px" ng-if="flight.timing.actual.end">{{flight.timing.actual.end}}</span>
												</div>
												<div class="schedule-table" ng-if="flight.breakhours.maintenance" data-flight-record="duration~{{flight.breakhours.maintenance.duration}}|start~{{flight.breakhours.maintenance.start}}|end~{{flight.breakhours.maintenance.end}}">
													<span class="schedule-cell pad-y0px" ng-if="!flight.breakhours.maintenance.blank"> <span class="schedule-table bg-{{flight.breakhours.maintenance.color}} radius2px" > <span class="schedule-cell">{{flight.breakhours.maintenance.reason}}</span> <span class="schedule-cell text-right"><i class="fa {{flight.breakhours.maintenance.icon}}" ng-if="flight.breakhours.maintenance.icon"></i> {{flight.breakhours.maintenance.time}}</span> </span> </span>
													<div class="schedule-cell pad0px" ng-if="flight.breakhours.maintenance.blank">
														{{flight.breakhours.maintenance.blank}}
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="schedule-cell">
										&nbsp;
									</div>
									<!-- <div class="schedule-cell" ng-if="flight==null">&nbsp;</div> -->
								</div>
							</div>
						</div>
					</div>
					<div class="schedule-route pad0px border-l-dark-blue-fade valign-top overflow-visible">
						<div class="schedule-table schedule-field-head bg-dark-blue" data-row="0">
							<span class="schedule-cell"> UTC </span>
							<span class="schedule-cell text-linetight text-center"> <span>+</span> <span>-</span> </span>
							<span class="schedule-cell">00:00</span>
						</div>
						<div class="schedule-table schedule-field-head" ng-repeat="route in big.route" data-row="{{addition($index,1)}}">
							<span class="schedule-cell bg-{{route.stylename}}">{{route.name}}</span>
							<span class="schedule-cell text-center bg-{{route.stylename}}"><span class="circle-icon" ng-hide="!route.info.icon"><i class="fa {{route.info.icon}}"></i></span></span>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<script src="angular.js" type="text/javascript"></script>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="schedule.js" type="text/javascript"></script>
		<script src="main.js" type="text/javascript"></script>
	</body>
</html>

deepak arya 23 сен. 2015, в 15:11

Источник

0

«hoursArray ()» в вашем коде будет рассматриваться как строка. Вы можете использовать что-то вроде функции eval () для запуска выражения в этой строке. Но это зависит от вашего сценария (как вы собираетесь использовать полученные данные).
Pavel Pykhtin 23 сен. 2015, в 12:48
0

подскажите пожалуйста как пользоваться eval
deepak arya 25 сен. 2015, в 05:56

Теги:

javascript

angularjs

json

2 ответа

Ещё вопросы

«hoursArray ()» в вашем коде будет рассматриваться как строка. Вы можете использовать что-то вроде функции eval () для запуска выражения в этой строке. Но это зависит от вашего сценария (как вы собираетесь использовать полученные данные).
подскажите пожалуйста как пользоваться eval

Michael P. Bazos · Answer 1 · 2015-09-23T11-46-00.000Z

Это хотя бы один способ сделать это без использования eval. Сначала передайте только имя функции без круглых скобок, то есть объект day будет выглядеть так:

// day object:
{
    "dayname": "Sun,23 Aug 2015",
    "date": "2015-08-23",
    "hours": "hoursArray"
}

Затем в контроллере объявите функцию как свойство контроллера:

myApp.controller("mainController", function ($scope, $http) {
    var vm = this;

    vm.hoursArray = function () {
        // ...
    }
}

Затем вы можете динамически получить такую функцию:

vm[day.hours]

я попробовал ваш метод, он не показывает никакого результата, я работаю над тестовым файлом в plunker, пожалуйста, посмотрите на него ссылку

Pablo Lozano · Answer 2 · 2015-09-23T10-13-00.000Z

Строки формата JSON подобны строкам XML: просто способ отправки данных. Вы не можете отправить исполняемый код в JSON (ну, есть способ использования eval, но это не очень хорошая идея).

Если я получаю структуру JSON с сервера, я бы ожидал, что все нужные мне данные уже присутствуют, поэтому массив hours должен быть заполнен на стороне сервера. Если мне нужно было заполнить поле, когда я получу ответ, тогда я выберу, как это сделать, вместо того, чтобы получать код со стороны сервера. Вы можете принять "подсказку" о том, как его заполнить или нет, но не сам код.

Итак, подведем итог:

Убедитесь, что данные заполнены на стороне сервера или
Заполните его на стороне клиента своим собственным методом.

Например:

 function hoursArray() {...};
  var data;
  $http.get('job.json').success(function(response) {
    data=JSON.parse(response);
    for (var i=0;i<data.days.length;i++) {
      data.days.hours=hoursArray();
    }
  });