Solved

Javascript Question

Posted on 2014-11-11
4
149 Views
Last Modified: 2014-11-16
Hi,

 I have attached the  script where I iterate through a list on one site and fetch values and then get list items from another list on another site and the title field of the first list should match the description of the URL field in the second list. and a table is built using the combined values. How do I modify this script so it is much more efficient? Right now it is a bit slower. Please help., also am doing a string comparison in the below script which is sometimes failing even though the strings match. What Am I doing wrong?
script.txt
0
Comment
Question by:Techsavy
  • 2
4 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40437785
Hi mate...
Like this out of nothing, with no concrete example it's hard to figure out what's going on.

On the topics you have SharePoint...
Is this IFrames running Provider Hosted Apps that you want to extract data from?
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40437825
Reading your code I can already see one improvement that will boost the process.

On the getprojects function you add a row the the table on each loop.
Don't do it like this. Instead, only change the DOM once at the end, which is the same to say that only do one $('#statusTable').append(...) at the end of the loop.

Specially if you have a lot of rows you'll see a big difference.
Here's the modified code:
$(document).ready(function () {
    getprojects();
});

function getprojects() {

    var hostweb = getSiteUrl();
    var url = hostweb + "/_api/web/lists/getbytitle('Related Projects')/items?";
	var htmlRows = [];
	
    $.ajax({
        url: url,
        method: "GET",
        async: false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {

            if (data.d.results.length > 0) {

                for (var i = 0; i < data.d.results.length; i++) {
                    var projectName = data.d.results[i].Title;
                    var projectURL = data.d.results[i].ProjectURL;
                    htmlRows.push(getProjectRow(projectName, projectURL));
                }

            }
            else {
                htmlRows.push('<tr class="mrvl-tblRow"><td colspan="2">No Related Projects Added</td></tr>');
            }
			
			$('#statusTable').append(htmlRows.join(''));
        },
        error: function (data) {
            //failure(data);
        }
    });
}

function getProjectRow(projectTitle, projectLink) {
    var projectName;
    var projectURL;
    var projectStatus;

    var listItemInfo = '';
    //Make a REST CALL to read all Items from the list.
    var pmsiteUrl = "http://mysite.com/it/pm/_api/web/lists/getbytitle('Dashboard')/items?$select=Project,Project_x0020_Status";


    $.ajax({
        url: pmsiteUrl,
        method: "GET",
        async: false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {

            if (data.d.results.length > 0) {
                for (var i = 0; i < data.d.results.length; i++) {
                    if (data.d.results[i].Project != null) {
                        projectName = data.d.results[i].Project.Description;
                    }
                    else {
                        projectName = "";
                    }

                    if (data.d.results[i].Project != null) {
                        projectURL = data.d.results[i].Project.Url;
                    } else {
                        projectURL = "";
                    }

                    if (data.d.results[i].Project_x0020_Status != null) {
                        var label = data.d.results[i].Project_x0020_Status.Label;
                        projectStatus = getStatusIndicator(label);
                    } else {
                        projectStatus = "-";
                    }

                    if (projectName == projectTitle) {
                        listItemInfo += "<tr class='mrvl-tblRow'><td>" + "<a href='" + projectURL + "'target='_blank'>" + projectName + "</a></td><td style='text-align:center;'>" + projectStatus + "</td></tr>";
                    }
                }

                return listItemInfo;
            }
            else {
                alert('Could not Contact IT PM Site');
            }
        },
        error: function (data) {
        }
    });

}



//getstatusindicator

function getStatusIndicator(statuslabel) {
    var returnString = "";

    switch (statuslabel) {
        case "60":
            returnString += "<img src='_layouts/images/kpinormal-2.gif' title='Red' alt='Red'/>";
            break;
        case "57":
            returnString += "<img src='_layouts/images/kpinormal-1.gif' title='Yellow' alt='Yellow'/>";
            break;
        case "55":
            returnString += "<img src='_layouts/images/kpinormal-0.gif' title='Green' alt='Green'/>";
            break;
        default:
            returnString += "-";
    }


    return returnString;

}

Open in new window

0
 
LVL 50

Expert Comment

by:Steve Bink
ID: 40438020
Here's a couple articles I came across recently.  The second link has a really good demonstration of the savings involved with each optimization.

https://developers.google.com/speed/articles/optimizing-javascript
http://www.webreference.com/programming/javascript/jkm3/index.html
0
 

Author Closing Comment

by:Techsavy
ID: 40446022
Thank you
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now