Develop Reference

Onclick for arrays in JSON

I'm retrieving data through an api, and creating a list using JS. I was wondering if it was possible to create a onclick function for every element in an array element of a JSON. The elements are being displayed, but nothing happens when I click them. Also, is it possible to pass on data in the JSON with this redirection to a new page?
My code is as follows:
var url = "https://api.nytimes.com/svc/movies/v2/reviews/all.json?api-key=b5f6bc931d6e446a998eb063a7c13d8e";
$.ajax({
url: url,
method: 'GET',
dataType: 'json',
success: function (data) {
var data = data;
details(data);
for (var i = 0; i < Object.keys(data.results[0]).length; i++) {
document.getElementById("movlist");
var item = document.createElement('li');
item.className = 'listele';
var itempicdiv = document.createElement('div');
itempicdiv.className = 'picdiv';
var itempic = document.createElement('img');
itempic.className = 'pic';
itempic.src = data.results[i].multimedia.src;
var itemnamediv = document.createElement('div');
itemnamediv.className = 'namediv';
var itemname = document.createTextNode(data.results[i].display_title);
itemname.className = 'name';
itempicdiv.appendChild(itempic);
itemnamediv.appendChild(itemname);
item.appendChild(itempicdiv);
item.appendChild(itemnamediv);
list.appendChild(item);
}
}
}).done(function (result) {
console.log(result);
}).fail(function (err) {
throw err;
});
function details(data) {
for (var j = 0; j < Object.keys(data.results[0]).length; j++) {
var t = data.results[j];
t.onclick = function () {
location.href = 'detail.html';
}
}
}

CasperJS - Scraper not navigating to the next page

The following code is a simple scraper written in CasperJS.
var casper = require('casper').create();
var url = casper.cli.get(0);
var page1 = casper.cli.get(1);
var page2 = casper.cli.get(2);
//console.log(page2);
var proxy = casper.cli.get(3);
//alert(page1);
var exp = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(exp);
var baseUrl = url;
//console.log(baseUrl);
var nextBtn = "a.navigation-button.next";
var allLinks = [];
casper.start(baseUrl);
casper.waitForSelector(nextBtn, processPage);
casper.run();
function processPage() {
for (var i = page1; i < page2; i = i + 1) {
console.log(i);
var pageData = this.evaluate(getPageData);
allLinks = allLinks.concat(pageData);
if (!this.exists(nextBtn)) {
return;
};
this.thenClick(nextBtn).then(function() {
//this.echo(i);
this.echo(this.getCurrentUrl());
//this.wait(1000);
});
};
}
function getPageData(){
//return document.title;
var links = document.getElementsByClassName('pro-title');
links = Array.prototype.map.call(links,function(link){
return link.getAttribute('href');
});
return links;
};
casper.then(function(){
//require('utils').dump(allLinks);
this.each(allLinks,function(self,link){
if (link.match(regex)) {
self.thenOpen(link,function(a){
jsonObj = {};
jsonObj.title = this.fetchText('a.profile-full-name');
jsonObj.services = this.getHTML('div.info-list-text span:nth-child(2) span');
jsonObj.services = jsonObj.services.replace(/&/g,"and");
jsonObj.location = this.getHTML('div.pro-info-horizontal-list div.info-list-label:nth-child(3) div.info-list-text span');
//jsonObj.contact = this.fetchText('span.pro-contact-text');
jsonObj.description = this.getHTML('div.profile-about div:nth-child(1)');
//jsonObj.description.replace(/\s/g, '');
//require('utils').dump(jsonObj);
//jsonObj.description = jsonObj.description.replace(/[\t\n]/g,"");
//jsonObj = JSON.stringify(jsonObj, null, '\t');
//console.log(i);
require('utils').dump(jsonObj);
});
};
});
});
I am executing this script as follows,
casperjs scraping.js http://www.houzz.com/professionals/c/Chicago--IL/p/15 1 3
The first CLI argument is the starting URL. The second and third arguments are the starting and ending page numbers of the scrape.
I am able to extract data from the first page, but I don't understand why I am not able to extract data from any of the consequent pages.

You cannot mix synchronous and asynchronous code like this in processPage. The loop is immediately executed, but the click and the loading of the next page happens asynchronously. The evaluation of the page has to be done asynchronously:
function processPage() {
for (var i = page1; i < page2; i = i + 1) {
this.then(function(){
console.log(i);
var pageData = this.evaluate(getPageData);
allLinks = allLinks.concat(pageData);
if (!this.exists(nextBtn)) {
return;
}
this.thenClick(nextBtn).then(function() {
this.echo(this.getCurrentUrl());
});
});
};
}

why does the data couldn't show in the viewpage?

this is the html code:
<li ng-repeat="data in spreadGroupData" ng-click="channelList(data.campaigns,data.name)">{{data.name}}</li>`
this is the code i write in the services.js:
services.getChannelName = function($scope,channelidList){
httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
$http.get(httpurl).success(function(data){
if(data.length>0){
$scope.spreadGroupData = [];
for(var i in data){
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
};
there are data in $scope.spreadGroupData,why couldn't show in the view page?
Now I know I shouldn't use $scope in the service,but the param 'channelidList' I get it from another service method. How to rewrite this all?
services.getListData = function(scope,flag){
var reportList = "quality_report",merger = true;
if(typeof flag!='undefined' && flag == 1){
reportList = "fakequality_report";
merger = false;
}
var cids = scope.spreadUrls,dateArr=scope.date.split(" - "),startDate = "",endDate = "",channelids = "";
if(dateArr.length==1){
startDate = endDate = dateArr[0];
}else{
startDate = dateArr[0];
endDate = dateArr[1];
}
if(cids!=null){
if(cids!='All'){
channelids = "&channelid="+cids.join(",");
}
if(scope.selecteds != -1 && typeof(scope.selecteds) != "undefined"){
httpurl = "api/app/"+scope.selecteds+"/report/"+reportList+"?startdate="+startDate+"&enddate="+endDate+channelids;
$http.get(httpurl).success(function(data,status){
scope.tabTitle = data.name;
var tableList = services.colToRow(data.val),cidlen = cids.length;
scope.tabTotal = services.dataToTotal(data.val,cidlen);
var key = data.key,tabname = [],zero = [],tabListInfo = [],allnames = scope.spreadNames;
for(var i=0;i<scope.tabTotal.length;i++){
zero[i] = 0;
}
for(i=0;i<cidlen;i++){
var idx = $.inArray(allnames[i],key);
tabListInfo[i] = new Array();
if(idx>-1){
tabListInfo[i] = tableList[idx];
}else{
tabListInfo[i] = zero;
}
if(merger){
var temp = [];
for(var j=0;j<tabListInfo[i].length;j++){
temp[j] = tabListInfo[i][j];
}
temp.unshift(scope.spreadNames[i]);
tabListInfo[i] = temp;
}
}
var channelIdList = [];
if(key.length>0){
var n = 0;
for(var i in scope.spreadData){
for(var j in key){
if(key[j] == scope.spreadData[i].name){
n++;
channelIdList.push(scope.spreadData[i].channel);
if(n>20) break;
}
}
}
}
services.getChannelName(scope,channelIdList.join(","));
scope.tabname = scope.spreadNames;
if(merger){
var tabListObj = [];
if(reportList == "quality_report"){
for(var i = 0; i <tabListInfo.length; i++){
tabListObj.push({
"name" : tabListInfo[i][0],
"hitNum" : tabListInfo[i][1],
"reSchedulNum" : tabListInfo[i][2],
"activeDevice" : tabListInfo[i][3],
"activeRate" : tabListInfo[i][4],
"payment" : tabListInfo[i][5],
"spdID" : cids[i]
});
}
}
scope.tabListInfo = tabListObj;
}else{
if(reportList == "fakequality_report"){
var tabListObj = [];
for(var i = 0; i <tabListInfo.length; i++){
tabListObj.push({
"name" : scope.tabname[i],
"reSchedulNum" : tabListInfo[i][0],
"hitNum" : tabListInfo[i][1],
"errHitNum" : tabListInfo[i][2],
"errHitRate" : tabListInfo[i][3],
"activeDevice" : tabListInfo[i][4],
"errActDevice" : tabListInfo[i][5],
"errActRate" : tabListInfo[i][6],
"spdID" : cids[i]
});
}
scope.tabListInfo = tabListObj;
}else{
scope.tabListInfo = tabListInfo;
}
}
scope.spreadIDs = cids;
}).error(function(data){
services.loginTimeout(data);
});
}
}
};

You should never pass $scope object to service, service should always have a reusable method which will exposed. I'd suggest you service method should return promise to the controller caller method, and caller method will implement the binding logic inside controller promise success method.
Service Method
services.getChannelName = function(channelidList) {
httpurl = "api/account/" + nowuID + "/channel/channellist?id=" + channelidList;
return $http.get(httpurl).success(function(data) {
return data;
}).error(function(err) {
return err;
});
};
Controller Method
$scope.getChannelName = function() {
$scope.spreadGroupData = [];
service.getChannelName(channelidList).then(function(data) {
if (data.length > 0) {
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
}, function(err) {
console.log("Error" + err);
})
}
Update
Whole idea about the code like below. Need to maintain proper code stack resolve.
First service method will return promise, on resolved of it you need to do change in some scope variables, then you will call second service method which has promise, on resolved of it you need to update scope.
Code
services.getListData(flag).then(function(data) { //you may need to pass multiple parameter to this
//then do scope operation
service.getChannelName(channelidList).then(function(res) {
if (res.length > 0) {
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
}, function(err) {
console.log("Error" + err);
});
})

I only saw one little thing that might be cause a problem, there is a missing var keyword in front of the httpurl variable and I only add that to below demo.
The view you need to show your data:
<body ng-controller="myController">
Spread Group Data
<br />
------------------------------------------------------------
<li ng-repeat="data in spreadGroupData"
ng-click="channelList(data.campaigns,data.name)">
{{data.name}}
</li>
</body>
I used a mock json provide to simulate your service and call it in a controller directly:
// Prepared a mock json array on the http://beta.json-generator.com and below url returns:
// [{"name":"Item 1","id":1},{"name":"Item 2","id":2},{"name":"Item 3","id":3},{"name":"Item 4","id":4}]
var httpurl = "http://beta.json-generator.com/api/json/get/LoUmNC4";
$http.get(httpurl).success(function(data) {
if (data.length > 0) {
$scope.spreadGroupData = [];
for (var i in data) {
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
If your service is independent from your controller, then you can pass $scope to your service method. But in this demo I implemented the http call block directly in a main controller. Besides this as #pankajparkar's said do not use the $scope in factories or service unrelated services and take and use response data from that like services. Please check promise and $q in order to handle asynchronous calls.
This is a working demo: Demo

Place $scope.spreadGroupData = []; outside $http call :-
services.getChannelName = function($scope,channelidList){
httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
$scope.spreadGroupData = [];
$http.get(httpurl).success(function(data){
if(data.length>0){
for(var i in data){
var group = {};
group.campaigns = data[i].id;
group.name = data[i].name;
$scope.spreadGroupData.push(group);
}
}
});
};

omit certain pages from history cookie

I am using this script to store the user's history to a cookie for the last 10 pages accessed. So far I've got the script displaying the cookie data using the document.title, and url in a list.
My question is what would be the simplest way to add a page skip feature, that would let me omit certain pages from being added to the history cookie? Everything I've tried hasn't worked, as it's a little bit outside of my knowledge.
Thanks for your time and help.
JS:
(function($){
var history;
function getHistory() {
var tmp = $.cookie("history");
if (tmp===undefined || tmp===null) tmp = "";
if ($.trim(tmp)=="") tmp = [];
else tmp = tmp.split("||");
history = [];
$.each(tmp, function(){
var split = this.split("|");
history.push({
title: split[0],
url: split[1]
});
});
}
function saveHistory() {
var tmp = [];
$.each(history, function(){
tmp.push(this.title+"|"+this.url);
});
$.cookie("history",tmp.join("||"),{ expires: 60, path: "/" });
}
function addToHistory(title,url) {
var newHistory = []
$.each(history, function(){
if (this.url!=url) newHistory.push(this);
});
history = newHistory;
if (history.length>=10) {
history.shift();
}
history.push({
title: title,
url: url
});
saveHistory();
writeHistory();
}
function writeHistory() {
var list = $("<ul />");
$.each(history, function() {
var element = $("<li />");
var link = $("<a />");
link.attr("href",this.url);
link.text(this.title);
element.append(link);
list.append(element);
});
$("#history").empty().append(list);
}
$(document).ready(function(){
getHistory();
var url = document.location.href;
var split = url.split("#");
var title;
if (split.length > 1) {
title = $("#"+split[1]).text();
} else {
title = document.title;
}
if (title===undefined || title===null || $.trim(title)=="") title = url;
addToHistory(title,url);
url = split[0];
$("a[href^='#']").click(function(){
var link = $(this);
var href = link.attr("href");
var linkUrl = url+href;
var title = $(href).text();
if (title===undefined || title===null || $.trim(title)==="") title = linkUrl;
addToHistory(title,linkUrl);
});
});
})(jQuery);
HTML:
<div id="history"></div>

several ways you could approach this... You could keep an Array of urls not to save, or you could put something in the page that would let the script know not to save that page?...
function saveHistory(){
if ($('.no-save-history')) return false;
/*...*/
}
HTML:
< div id="history" class="no-save-history">

How do get param from a url

As seen below I'm trying to get #currentpage to pass client params
Can someone help out thanks.
$(document).ready(function() {
window.addEventListener("load", windowLoaded, false);
function windowLoaded() {
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentpage').innerHTML = tab.url;
});
}
var url = $("currentpage");
// yes I relize this is the part not working.
var client = jQuery.param("currentpage");
var page = jQuery.param("currentpage");
var devurl = "http://#/?clientsNumber=" + client + "&pageName=" + page ;
});

This is a method to extract the params from a url
function getUrlParams(url) {
var paramMap = {};
var questionMark = url.indexOf('?');
if (questionMark == -1) {
return paramMap;
}
var parts = url.substring(questionMark + 1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
Here's how to use it in your code
var url = "?c=231171&p=home";
var params = getUrlParams(url);
var devurl = "http://site.com/?c=" + encodeURIComponent(params.c) + "&p=" + encodeURIComponent(params.p) + "&genphase2=true";
// devurl == "http://site.com/?c=231171&p=home&genphase2=true"
See it in action http://jsfiddle.net/mendesjuan/TCpsD/
Here's the code you posted with minimal changes to get it working, it also uses $.param as it's intended, that is to create a query string from a JS object, this works well since my suggested function returns an object from the url
$(document).ready(function() {
// This does not handle arrays because it's not part of the official specs
// PHP and some other server side languages support it but there's no official
// consensus
function getUrlParams(url) {
var paramMap = {};
var questionMark = url.indexOf('?');
if (questionMark == -1) {
return paramMap;
}
var parts = url.substring(questionMark + 1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
// no need for the extra load listener here, jquery.ready already puts
// your code in the onload
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentpage').innerHTML = tab.url;
});
var url = $("currentpage");
var paramMap = getUrlParams(url);
// Add the genphase parameter to the param map
paramMap.genphase2 = true;
// Use jQuery.param to create the url to click on
var devurl = "http://site.com/?"+ jQuery.param(paramMap);
$('#mydev').click( function(){
window.open(devurl);
});
});