We Keep Coding

JavaScript Invalid export data. Please provide an array of objects

Im writing a function to export data pulled from C# to a csv file in JavaScript. The data is trying to be passed into an active webpage with live data. The goal is to export said data from C# string to the clients window hence the transfer to JavaScript (if my understanding is right). Then the JavaScript function in the page will download to the users window.
My issue is why am I have the invalid export data, please provide an array of objects output when I think I provide it one?
C# Code:
protected string test()
{
MyRequest request = new MyRequest();
request.Id = "TEST";
// Cant post this class but this is what I do
var tmp = new ExistingClassOfMine();
// pulls the data from the existing class through GetResponse();
// Then convert to json string
string data = JsonConvert.SerializeObject(tmp.GetResponse(request));
// Data found from breakpoint: {"Slot1":[{"Name":"TJ", "ID":"123"},{"Name":"Joe","ID:456"}], "TotalCount":2}
return data;
}
JavaScript:
function exportToExcel() {
console.log("Exporting to Excel");
isExporting = true;
const fileName = 'NameList';
const exportType = 'csv';
var data = <%=this.test()%>;
var readData = data["Slot1"];
var myArray = [];
// Followed a stack article to create this
for (var i in readData) {
myArray.push(readData[i]);
}
// Logging stuff for debugging
console.log("Data from C#");
console.log(data);
console.log(typeof (data));
console.log("Data we want to export");
console.log(readData);
console.log("Parsed Data?");
console.log(myArray);
// fails here with the error Invalid export data, please provide an array of objects
// which I thought I did with my for loop up a few lines
window.exportFromJSON({myArray, fileName, exportType});
isExporting = false;
}
function onRequestStart(sender, args) {
if (isExporting) {
args.set_enableAjax(false);
}
}
Log output:

Look, your triying to change the name of the key which is sent to exportFromJSON. The right way to name the key is data no myArray.
Change:
myArray
to
data
or assign myArray to data key
window.exportFromJSON({data:myArray, fileName, exportType});

Angular JS : how can I load the factory only once?

I am using a static json file to simulate my server and getting my array of orders from it.
I'm presenting the orders in a table in my html file with the option of deleting one from it.
Each time I load the html file the full list gets loaded, with the orders I have deleted throught the controller function.
How can I loat the data from the factory only once?
Here is my controller:
app.controller("MainPageCtrl", function($scope, getOrdersFactory)
{
$scope.orders = [];
// Getting the data frm the facrory
var dataPromise = getOrdersFactory.getDataFunc();
dataPromise.then(function(data){
$scope.orders = data.orders;
});
// Deletes an orders.
$scope.deleteOrder = function(order){
// Finds the index of the order.
var orderIndex = $scope.orders.indexOf(order);
// Delete the order.
$scope.orders.splice(orderIndex, 1);
};
});

By default angular services and factories are singletons(loaded only once). The problem you are facing is with controller re-initialization. When route change happens the controller is re-initialized so therby getting the previous value from the factory.
You can use a setter function on your 'getOrdersFactory'.
Assuming your 'getOrdersFactory' to be
app.factory('getOrdersFactory',function(){
//code to read from file and set the file on a variable orderDetails
var orderDetails = contentsReadFromFile;
return{
getDataFunc:function(){
return orderDetails
},
setDataFunc:function(modifiedOrderDetails){
orderDetails = modifiedOrderDetails;
//code to set the new content to the static file
}
}
}
code to read the file from the static file will be rendered when you inject the factory for the first time, and on your controller set the order details on the delete function
// Deletes an orders.
$scope.deleteOrder = function(order){
// Finds the index of the order.
var orderIndex = $scope.orders.indexOf(order);
// Delete the order.
$scope.orders.splice(orderIndex, 1);
getOrdersFactory.setDataFunc($scope.orders);
};

I guess you are losing your data i.e $scope.orders .If this is the scenario just change
dataPromise.then(function(data){
$scope.orders = data.orders;
});
to
dataPromise.then(function(data){
$scope.orders = angular.copy(data.orders);
});

Return list to JSON to Angularjs

It is such that I must have sent some content from my controller over to Angularjs which shall come forth with words such as only L in themselves or E, so it goes in other words, of words where it like just let the words sign which has the single letter.
There is no fault forward by the console and what I believe is the problem is that it does not specify any value to the side.
i have try its here:
A circular reference was detected while serializing an object of type 'SubSonic.Schema .DatabaseColumn'.
Load.js
var app = angular.module('WordSpreads',[]);
app.controller('WordSpreadsListValue', function ($scope, $http) {
$http(
{
method: 'GET',
url: '../Profile/MWordSpreads'
}).success(function (response) {
$scope.entries = data.List;;
});
console.log("TEST");//It does not appear in the console log.
});
Controller:
[HttpGet]
public JsonResult MWordSpreads()
{
WordsSpreadsListValue model = new WordsSpreadsListValue();
var db = HelperToTables.DbValue;
model.List = db.WordSpreads.ToList();
return Json(model.List, JsonRequestBehavior.AllowGet);
}
Model:
public class WordsSpreadsListValue
{
public List<WordSpread> List { get; set; }
}
Error giv me:
A circular reference was detected while serializing an object of type
'xxSitename.Models.LinqDatabase.WordSpread'
UPDATE:
model.List = db.WordSpreads.Select(x => new {
Name = x.name,
TextValue = x.text.ToString()
}).ToList();
ERROR :
Cannot implicitly convert type
'System.Collections.Generic.List<>' to
'System.Collections.Generic.List' MVCOrdklar2015
.

model.List = db.WordSpreads.Select(x => new { Prop1 = x.1, Prop2 = x.2}).ToList();
You are having trouble serializing model.List, the Json serialize is barfing on serializing model.List. If you make it a new object without navigation properties you will be fine.
In my experience it has to do with the navigation properties, I dont fully understand what it is. But, once you remove the navigation properties from the equation it will work.

Accessing Fetched Resources From a Controller?

In my AngularJS controller I'm trying to do something relatively simple: I'm trying to populate a <select> element dynamically in the controller. To do so I need to wait for my localized UI text data to be loaded and data from my server to be loaded and this is causing a problem for me.
What my HTML Looks like:
<select
data-ng-model="group"
data-ng-options="options.value as options.label for options in userGroups">
<option>--</option>
</select>
Then my controller is actually implementing a base controller "class" which allows me to share logic between controllers:
// exampleController.js
myModule.controller('exampleController',
['$scope', '$timeout', '$routeParams', '$controller',
function ($scope, $timeout, $routeParams, $controller) {
// Instantiate the base controller class and set it's scope
// to this controller's scope. This is how the base and child
// controllers will share data and communicate.
var base = $controller('baseController', { $scope: $scope });
}]);
And here is a relevant snippet of the baseController:
// baseController.js
$scope.getDataFromUrl = function (url, cache, successFunction) {
$http.get(url, { cache: cache })
.success(function (data) {
if (!handleErrorInData(data))
{
successFunction(data);
}
});
};
$scope.getDataFromUrl(uiTextResourceUrl, true, function (data) {
$scope.uiText = data;
});
So baseController fetches the text resources when it loads and sets it to the scope when it's finished retrieving the data. exampleController on the other hand will fetch other data from the server via the getDataFromUrl() function defined in baseController like so:
$scope.getDataFromUrl(dataUrl, false, function (data) {
// Do stuff with the returned data...
};
My issue is coming from this part of the exampleController code where I populate the data of the <select> element from earlier:
// exampleController.js (Continued...)
$scope.getDataFromUrl(userGroupsUrl, false, function (data) {
initSelectDropdown(data);
});
var initSelectDropdown = function (data) {
var userGroups = [];
// Parse data retrieved from the server and populate the <select> bound data
// array with it
var index;
for (index = 0; index < data.length; ++index)
{
var newGroup = {
value: data[index],
label: data[index]
};
// One of the data entries will have a value of "", this group needs its
// label to be set to the localized string "No Group"
if (newGroup.value === "")
{
newGroup.label = '<' + $scope.uiText['NoGroup.Text'] + '>';
}
userGroups.push(newGroup);
}
// Set local userGroups to scope
$scope.userGroups = userGroups;
};
The problem I'm having is here in the initSelectDropdown() function. I need to have both the data from the server and the uiText resource data from the server, particularly the line newGroup.label = '<' + $scope.uiText['NoGroup.Text'] + '>'; where the data is being transformed in a way that is dependant on localized resources being loaded. I researched the issue and saw that using $q.all() might be a solution but unfortunately in my case there is no way for me to call $q.all() because the two calls to fetch data are being made from different functions in different controllers (data being requested from child controller and resources being requested from base controller).
In the view it's easy to fix this because if I bind an element to $scope.uiText['SomeText.Text'] then it doesn't care if SomeText.Text is undefined at first and when it is eventually populated the UI will automatically pick up on the change.
How can I make this work? Is it possible to achieve something like how binding works in the view?

For sharing code angular provides services/factory, you don't need to use base controller.
Define a factory class and add two methods, one to fetch your server data and other to fetch uiText data. these methods will return promises.
Now in your controller you can use $q.all() passing the two promises that will be resolved when ajax call is complete.
Hope it makes sense ?

AngularJS - updating the model shared by different controllers

I'm just starting with AngularJS, building my first test web app.
I have several controllers that share the same model.
This is my model:
uxctModule.factory ("ModelData", function () {
var data = {
param1: '',
param2: '',
param3: '',
[more params....]
}
return data
});
So this is an example of my controller
uxctModule.controller ('PageOne', function ($scope, ModelData){
$scope.data = ModelData;
[do things here]
});
I'm now trying to change the model by loading a string from a file, and I was expecting the app to update accordingly.
So in a controller I'm loading a file and trying to update the model:
uxctModule.controller ('NavigationController', function ($scope, ModelData) {
$scope.data = ModelData;
$scope.browsePressed = function (evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
console.log (contents);
console.log ("ModelData was " + ModelData.param1);
ModelData = JSON.parse(contents);
console.log ("ModelData is now " + ModelData.param1);
}
r.readAsText(f);
}
else {
alert("Failed to load file");
}
}
});
I've built a "debugger" div in the html to see the model:
<div id="debuggerBox" ng-controller="Debugger" width='300'>
<pre>{{data | json}}</pre>
</div>
...whose controller is simply:
uxctModule.controller ('Debugger', function ($scope, ModelData){
$scope.data = ModelData;
});
Now, when changing the model content loading the external file I can see on the console the right logs (values changed), but on the debugger box the Model object is still holding the old values.
As I said, I'm an AngularJS beginner, so maybe I'm doing something really wrong here. Any help is appreciated :)

The problem is you're replacing the whole object:
ModelData = JSON.parse(contents);
with this, the ModelData references another object but the original object is not modified.
You could fix this by copying field by field to the ModelData. Sample code:
var tempModelData = JSON.parse(contents);
ModelData.param1 = tempModelData.param1;
or you could try angular.copy:
angular.copy(JSON.parse(contents), ModelData);
Also try $scope.$apply to let angular aware of the changes:
$scope.$apply(function(){
angular.copy(JSON.parse(contents), ModelData);
});