asked on

JavaScript OOP development in Sharepoint

I am really trying to grasp the concept of JavaScript OOP. I have a SharePoint site and I want to implement creating instances from an object but I'm having a challenging time.

Here's what i'm trying to do. I want to create a jqplot chart that will show the number of trucks for each county. Here's my list
I basically need to loop through the items and add up the number of trucks for each county. The pie chart will look like this but be dynamic.

This is what I have so far. I want to use javascript factory pattern and also prototypes.

function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
	
 function complete(data) {
 
 for (i=0;i<=data.length; i++)
 {
	var jqPlotdata = new newTruck({
		state: data.d.results[i].State,
		town: data.d.results[i].Town,
		county: data.d.results[i].county,
		numberOfTrucks: data.d.results[i].numberOfTrucks	
	});
 }
 }
 
function failure(data) {
 alert("Operation failed.");
 }
 
 function newTruck(param) {
	this.state = param[0];
	this.town = param[1];
	this.county = county[2];
	this.numberOfTrucks = county[3];
	icTrucks.countArray = [];
 }
 newTruck.prototype.getCount = function () {
 // not sure but do something
 }

}

Open in new window

Can someone please help me connect the dots?

Thanks

Julian Hansen

Just trying to understand why you are doing it that way?

Why not simply return the required object to your AJAX call using JSON. This can then be sent directly to jqPlot as per this example here http://www.jqplot.com/tests/data-renderers.php#highlighter_778965

Isaac

ASKER

I know. I'm just trying to learn OOP. The best way to learn is create something

Julian Hansen

Ok but what about oop are you wanting to learn?

Start by describing in words what you were trying to achieve with this code and lets take it from there.

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isaac

ASKER

julianH,

What I am trying to do is get the total number of trucks for each county or state. So in my code, I wanted to use the factory pattern as a solution to achieve my objective. In my code above, after getting my data using rest, I was trying to create a loop as I created an instance of the class. Obviously, this was all wrong according to 'slick812'. I would also like to know your method using OOP.

slick812,

Thanks for your comment. I appreciate it. I believe seeing others approaches will really help me to grasp the concept.
I think I understand what you are doing but a bit confused. How does the this.makePieArray() method get called?

Also, what design pattern is that? Any online resources that talks about it?

Isaac

ASKER

slick812,

In your first block of code on line 17, what is the below doing?

 this.input[this.states[i]]]

Open in new window

Also, could you do this in jsfiddle I started it but need help finishing it.

Isaac

ASKER

Thanks Slick812.

I got your solution to work but I have a few questions about the design pattern. I will post another question in regards to this.

Thanks again.

Member_2_248744

Sorry, I was away from my correspondence for EE, so I'm here now, you ask about -
this.input[this.states[j]]

I did NOT place any explanation comments in my code, as I have absolutely no Idea what you already know about javascript, and what I may need to explain.
I stared with 2 data containers as -
this.inputs= {};
this.states = [];

the states array, is used as an INDEX reference storage container, , for the many state's Names, which I then use to access the Inputs Object stored numbes, as this allows me to "Sort" out the different "States" numbers, as Objects segregate the data packets, by a "name" text reference as -
this.inputs.Virginia
would hold the number of the added Virginia trucks.

I know in the output array for pie chart that I need the state Name and the total number, I use the FOR LOOP with the states array -
for (j = 0; j < this.states.length; ++j) {
to get all of the states "Names", and since I have the inputs object with "Names" reference access, I use the state name in - this.states[j] - to access the Number total in the inputs object -
this.input[this.states[j]]
which would compute to -
this.input["Virginia"]
for different names.

In programming operations that need to store many data sections (packets , segments), then need to sort, arrange and-or list them, for output. You need to know exactly the required end result needed (an array of arrays in this case) so you can include storage structures in the function that you can do sorting, re-arrangement, filtering, or various listing, as you need to get your output.
- - - - - - - - - - - - - - -

You say - "I have a few questions about the design pattern"

You originally mention this "I want to use javascript factory pattern and also prototypes", I have made many javascript operations that use what some may or may not call a "factory pattern", the use of a function Class that is modifiable in the initialization to DIFFERENT uses (Inputs, sorting, and or output) according to the Different options from a dynamic source, is one of my main programming paths. However, the Idea-definition of "factory pattern", is vastly different than doing development in actual code, and then stretching, shoving, re-doing, re-structuring, and debugging the code work to be changeable for different dynamic options that occur and have the required output.

In this You have NO Dynamic Options (changeable), you have ONLY a single data source structuring, and a single output requirement, So I do not understand why you would even consider the idea of "factory pattern" for this operation?

I had NO THINKING at all , NONE, about a "Patten" of programming, or of a "Definition" of the way I did this code work, this is a total waste of time for a developer, I use my experience and many times previous code work, to know some arrangement of operations , storage, and loops to use, to piece together, one thing at a time and test (debug) to work towards the needed goal.

Isaac

ASKER

Thanks Slick812

There was no real reason for considering the "factory pattern" other than to understand how, why and when to use it. As stated initially, I am just trying to learn and understand OOP.

Thanks for the breakdown of your code.