Fatema Rangwala Fatema Rangwala - 14 days ago 6
Javascript Question

How to pass a json from directive to controller through angular js

I have a requirement of showing the excel data on UI, for this i used ui-grid and was able to show the excel data in ui-grid.
But only one sheet data gets load in ui-grid.
If I am using the excel which has multiple sheets, I want to show all the sheet names in dropdown on UI and on the basis of the sheet selected the data respective to that sheet should get populated.
I am able to see the data in JSON form in the directive being used but I am not able to populate the sheet names in dropdown
This is the plunker for what have been done yet


This is the directive code and controller code:

angular.module('app', ['ui.grid'])

.controller('MainCtrl', ['$scope', function ($scope) {
var vm = this;

vm.gridOptions = {};

vm.reset = reset;
//I want to use that JSON in controller so that i can show the values in grid
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];

directive("fileread", [function () {
return {
scope: {
opts: '='
link: function ($scope, $elm, $attrs) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();

reader.onload = function (evt) {
$scope.$apply(function () {
var data = evt.target.result;

var workbook = XLSX.read(data, {type: 'binary'});

//I want to pass the workbook object to controller, as it has all the required data

var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
//I get all the sheet names of excel through workbook.SheetNames, I want to show this sheet names in dropdown and on basis
//of the sheet selected it should load data of that sheet in the ui-grid, workbook.Sheets consists of data of all the Sheets present in Excel

$scope.sheetName=workbook.SheetNames;//Passed the sheet names to scope variable
var data = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);

$scope.opts.columnDefs = [];
headerNames.forEach(function (h) {
$scope.opts.columnDefs.push({ field: h });

$scope.opts.data = data;



enter image description here

In sheetNames I am able to see all the sheet names, but in the dropdown I get a blank dropdown

enter image description here

This is the HTML:

<!DOCTYPE html>
<html ng-app="app">

<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />

<div ng-controller="MainCtrl as vm">
<button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
<br />
<br />
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Spreadsheet File</span>
<br />
<input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="true" />
<select ng-model="names" ng-options="names as names for names in sheetName"></select>
{{sheetNames | json}}
</pre><!-- Dropdown is coming blank-->
<script src="app.js"></script>


Please suggest how can i achieve the requirement, how can i pass the Json or object from directive to controller. It would be a great help.


You need to pass the sheetNames varible to directive. like how you pass opts.

I updated the plnkr check the below