So i've been using a test file to try and pull Shopify data from the store. What I THINK is the problem, is that the api is making the request to fetch the data, but it takes longer to fetch the data than to run through my script. So the variable gets set to null. I'm assuming I need a way to check if the promise is successful and/or write the data to a JSON file. Anyway, here's the code. The page shows up blank when you run it.
App.js
phonecatApp.controller('PhoneListController', function
PhoneListController($scope) {
var products_complete;
var products = [];
//init the client
const client = window.ShopifyBuy.buildClient({
domain: 'some-site.myshopify.com',
storefrontAccessToken: 'xxxxxxxxxxxx'
});
$scope.getShop = function () {
//get the complete product listings from shopify
client.product.fetchAll().then((raw_products) => {
products_complete = raw_products;
reduce_products();
$scope.products = $scope.setProductValue();
});
//reduce the products list down to necessary information
function reduce_products() {
for (var i in products_complete) {
var product_tmp = products_complete[i];
var product = {};
//add name and tags
product['title'] = product_tmp['title'];
product['tags'] = product_tmp['tags'];
product['type'] = product_tmp['productType'];
product['pic_urls'] = [];
//add the images
for (var j in product_tmp['images']) {
if (product_tmp['images'][j]['src'] != null) {
product['pic_urls'].push(product_tmp['images'][j]['src']);
}
}
product['vars'] = []
for (var k in product_tmp['variants']) {
var w = product_tmp['variants'][k]['weight'];
var p = product_tmp['variants'][k]['price'];
var a = product_tmp['variants'][k]['available'];
if (!((typeof w == 'undefined') && (typeof p == 'undefined') && (typeof a == 'undefined'))) {
product['vars'].push({
'weight': w,
'price': p,
'available': a
});
}
}
//add the current product to the final list
if (('title' in product) && ('tags' in product) &&
(product['pic_urls'].length != 0) &&
(product['vars'].length != 0)) {
products.push(product);
}
}
}
return products;
}
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PhoneListController" ng-cloak>
<ul>
<li ng-repeat="product in products">
<p>{{product.title}}</p>
</li>
</ul>
</body>
</html>
Your local variable products is not visible within your HTML. You should use $scope.products within _reduce_products_ function, or return the value and assign it to $scope.products.
The products var you are using in your HTML is $scope.products, that has the value of:
$scope.products = $scope.setProductValue();
So, in your promise success function you should update $scope.products with the products your are reducing in your _reduce_products_ function, or if you're using $scope.products for another thig, you should have another scope variable for that.
client.product.fetchAll().then((raw_products) => {
products_complete = raw_products;
// What's this? $scope.products = $scope.setProductValue();
$scope.products = reduce_products(); // return reduced products array
});
Related
I am creating and clustering my markers with the markerclusterer library and this code:
function populateMapLocationData(locations) {
NgMap.getMap({id:'map'}).then(function(map) {
$scope.assetMap = map;
$scope.initMarkerClusterer(locations);
});
};
$scope.initMarkerClusterer = function(locations) {
$scope.bounds = new google.maps.LatLngBounds();
var markers = $scope.createMarker(locations);
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
var markerCluster = new MarkerClusterer($scope.assetMap, markers, mcOptions);
$scope.assetMap.fitBounds($scope.bounds);
$scope.assetMap.panToBounds($scope.bounds);
};
$scope.createMarker = function(location) {
var latLng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lang));
$scope.bounds.extend(latLng);
var marker = new google.maps.Marker({position: latLng, title: asset.name});
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow();
var center = new google.maps.LatLng( parseFloat(asset.lat), parseFloat(asset.lang) );
infowindow.setContent("content");
infowindow.setPosition(center);
infowindow.open($scope.assetMap);
google.maps.event.addListener($scope.assetMap, 'click', function(event) {
infowindow.close();
});
});
return marker;
};
And this works fine on the first iteration.
Come to hitting populateMapLocationData function again with new locations, the bounds change and the map centers and zooms to the new location of the new markers so I think it is working however all the previous markers are still there.
What I want to achieve is when I call populateMapLocationData with a new set of locations, clear the existing markers and update the map with new ones.
I have seen markers[key].setMap(null); can be used but I haven't had any success.
Any advice is appreciated, thanks
Actually, if you are using Google's original markerclusterer.js, to remove a marker you just need to use its MarkerClusterer.prototype.removeMarker function and to remove an array of markers you just use its MarkerClusterer.prototype.removeMarkers Luckily, ngMaps's markerclusterer.js is just a wrapper for the original.
More on that in Google's documentation
Ex:
vm.dynMarkers = [ {marker1}, {marker2}, ...] // your marker array
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); // creater your marker cluster
vm.markerClusterer.removeMarkers(vm.dynMarkers); // remove all markers
I've made a plunker example for you to follow wherein I used the ngMaps example library as a base so that it's easier for you (make sure to use your own API key): https://plnkr.co/edit/RZNc2KLdO8qmW0o2Kimq?p=preview
Here's the embedded code as well:
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($http, $interval, NgMap) {
var vm = this;
vm.removeAllMarkers = removeAllMarkers;
vm.dynMarkers = [];
vm.map;
NgMap.getMap().then(function(map) {
for (var i = 0; i < 1000; i++) {
var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
vm.dynMarkers.push(new google.maps.Marker({
position: latLng
}));
}
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {});
vm.map = map;
});
function removeAllMarkers() {
vm.markerClusterer.removeMarkers(vm.dynMarkers);
vm.dynMarkers = [];
console.log('all markers in cluster removed');
}
});
map,
div[map] {
display: block;
width: 600px;
height: 400px;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Dynamic ngMap demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script>
<script>
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path
</script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
</head>
<body>
<h1>Marker Cluster</h1>
<hr />
<div ng-controller="mapController as vm">
<ng-map zoom="2" center="[43.6650000, -79.4103000]"></ng-map>
<button ng-click="vm.removeAllMarkers();" type="button">Remove All Markers</button>
</div>
</body>
</html>
I have a really long json that each comes from different schema.
I did push in order to get them all in one json - that works.
know I want to use a controller for all of them and display it to the screen.
my index
<!DOCTYPE html>
<html ng-app="showFrozen">
<head>
<title>frozen</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="showFrozenCtrl">
<tbody>
<div ng-repeat="themes in showFrozenController.themes" ng-show="$first">
<h2>{{themes.theme}}</h2>
<span>for age: </span>
<p>{{themes.age}}</p>
<span>description: </span>
<p>{{themes.description}}</p>
<p>{{themes.description_more}}</p>
<img ng-src="{{themes.image}}" width="170" height="170">
</div>
</table>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/showFrozenController.js"></script>
</body>
</html>
my controller
var showFrozen = angular.module('showFrozen',[]);
showFrozen.filter("allItems", function() {
return function(frozen) {
var resultArr = [];
angular.forEach(frozen,function(item) {
resultArr.push(item);
});
return resultArr;
};
});
var model = {};
showFrozen.run(function($http) {
$http.get("http://localhost:3000/frozen").success(function(data){
console.log(data);
model.frozen = data;
});
});
showFrozen.controller('showFrozenCtrl',function($scope) {
$scope.showFrozenController = model;
});
so I don't get any output - but I see the json in the console, I'm attaching an image.
In your controller model is undefined.
Move the HTTP call to your controller and in the success assign the scope.showFrozenController to data
You need to make your $http request inside of your controller.
showFrozen.controller('showFrozenCtrl',function($scope, $http) {
$http.get("http://localhost:3000/frozen").success(function(data){
console.log(data);
$scope.model = data;
});
});
This is because when you try and print items out in your template (html) what is actually being accessed inside of any {{ }} blocks is your $scope object. So to make data available to your template you must store it on your $scope.
Have a read of this blog post
showFrozen.factory('frozenDataSrv',function($http) {
return {
getFrozenData: getFrozenData
};
function getFrozenData() {
return $http.get("http://localhost:3000/frozen")
.then(getFrozenDataComplete)
.catch(getFrozenDataFailed);
function getFrozenDataComplete(response) {
return response.data.results;
}
function getFrozenDataFailed(error) {
logger.error('XHR Failed for getFrozenData.' + error.data);
}
}
});
showFrozen.controller('showFrozenCtrl',function($scope, frozenDataSrv) {
frozenDataSrv.getFrozenData()
.then(function(response){
console.log(response)
})
});
I know there are a few posts similar to this but I simply can't get any of them to work for me as intended. I'm trying to setup an event handler to listen to a location change on a specific scope. The code looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="verifyViewChange">
Test
</div>
<script>
var app = angular.module('myApp', []);
app.controller('verifyViewChange', function ($location, $scope) {
$scope.$on('$locationChangeStart', function (event) {
event.preventDefault();
alert("I'm preventing you from leaving the page");
});
});
</script>
</body>
</html>
When I load the page I get the warning, but not when clicking on the link. What do I need to do to make it work?
You should use the native 'beforeunload' event by adding it to the window.
Below is an example:
$scope.addUnloadEvent = function(){
if (window.addEventListener) {
window.addEventListener("beforeunload", handleUnloadEvent);
} else {
//For IE browsers
window.attachEvent("onbeforeunload", handleUnloadEvent);
}
}
function handleUnloadEvent(event) {
event.returnValue = "Your warning text";
};
//Call this when you want to remove the event, example, if users fills necessary info
$scope.removeUnloadEvent = function(){
if (window.removeEventListener) {
window.removeEventListener("beforeunload", handleUnloadEvent);
} else {
window.detachEvent("onbeforeunload", handleUnloadEvent);
}
}
//You could add the event when validating a form, for example
$scope.validateForm = function(){
if($scope.yourform.$invalid){
$scope.addUnloadEvent();
return;
}
else{
$scope.removeUnloadEvent();
}
}
The [fix above] is great just added this bit to the handleUnloadEvent...
function handleUnloadEvent(event) {
/*
This bit here theres another bind that says if this fields initial value is
not the same as its current value add the class of input-changed if it is
remove the class...so you can flag any page ya want to prompt a dialog based
on presence of a class on an input.
*/
var changeCheckCount = $('.input-changed').length;
console.log('changeCheckCount',changeCheckCount);
if(changeCheckCount === 0)
{
$scope.removeUnloadEvent();
}
else if(changeCheckCount > 0)
{
event.returnValue = "You have Unsaved changes do you really want to leave?";
}
Allows you to say if you want dialog to reload or leave page with just a class...Suppose you could bind the dialog too by finding the first one with .input-changed and have a data attribute on it with the message to show as the dialog.
Below is working example , it may helpful to you:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="verifyViewChange">
Test
</div>
<script>
var app = angular.module('myApp', []);
app.controller('verifyViewChange', function ($location, $scope) {
$scope.funConfirm = function () {
var retVal = confirm("I'm preventing you from leaving the page");
if (retVal == true) {
return false;
} else {
event.preventDefault();
return false;
}
}
});
</script>
I just tried to adopt backbone.js to my project with the todo example. In my app.js file I try to instantiate my views/models/collections etc. but I try to I get the error msg: app is not defined in TodoList.
HTML:
<head>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone-min.js"></script>
<script type="text/javascript" src="js/backbone-localstorage.js"></script>
<script type="text/javascript" src="js/models/models.js"></script>
<script type="text/javascript" src="js/collections/collections.js"></script>
<script type="text/javascript" src="js/views/views.js"></script>
<script type="text/javascript" src="js/views/app.js"></script>
<script type="text/javascript" src="js/app.js"></script>
app.js(root for my application):
var app = {
models:{},
collections:{},
views:{}
};
jQuery(function($) {
var Todos = new app.collections.TodoList;
var test = new Todo;
var test2 = new TodoView;
var appView = new AppView({});
});
collections.js:
app.collections.TodoList = Backbone.Collection.extend({
model: Todo,
localStorage: new Store("todos"),
done: function() {
return this.filter(function(todo) {
return todo.get('done');
});
},
remaining: function() {
return this.without.apply(this, this.done());
},
nextOrder: function() {
if (!this.length) return 1;
return this.last().get('order') + 1;
},
comparator: function(todo) {
return todo.get('order');
}
});
You're trying to use a namespace before it's ready. Two options. First, have 'app.js' first but take out initialization code and put that into a 'bootstrap.js' that's loaded absolute last. Second option, and the one that I generally lothe, define your namespaces that you need in the file if they aren't already there. For example
var app = app || {};
app.collection = app.collection || {};
Basically, the code is loading in one by one. When you say namespace.subspace, the code expects that namespace has already been defined as something - generally an object in most cases that I've seen. Without that base piece the code will just flatline - it'll assume you're trying to do the equivalent of building a castle starting with the roof.
I'm using the Channel API in a Chrome extension.
In Google App Engine Channel API Javascript Reference (Python) page it says that
Include the following in your html page before any JavaScript code
that refers to it:
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
So, I put that in the header of my options.html file:
<html>
<head>
<title>Extension Options</title>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
</head>
but Chrome throws jsapiFailed to load resource error. What am I doing wrong?
Update
As per Moishe's answer I updated the call to jsapi like this:
<head>
<title>Extension Options</title>
<!-- this does not work because it is local
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
-->
<script type="text/javascript" src="https://talkgadget.google.com/talkgadget/channel.js"></script>
</head>
Update
I added onopen and other properties. Now I get the onopen alert but I am not getting the evt.data alert. What am I doing wrong?
<html>
<head>
<title>Extension Options</title>
<!-- this does not work because it is local url
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
-->
<script type="text/javascript" src="https://talkgadget.google.com/talkgadget/channel.js"></script>
</head>
<body>
<p>Enter your gmail address:</p>
<textarea id="getEmail" style="margin-bottom: 4px; width: 250px; height: 20px">
</textarea><br />
<button id="save">Save</button>
<!--<button id="save">Clear</button>-->
<script>
document.getElementById("getEmail").placeholder = "your gmail address" ;
//save entered gmail address
document.getElementById("save").addEventListener
(
"click",
function ()
{
var userEmail = document.getElementById("getEmail").value;
var formData = new FormData();
formData.append("extension_user", userEmail);
alert("after formData.append")
var channel;
var socket;
var handler =
{
onopen: function () { alert("onopen") },
onerror: function () { alert("onerror") },
onclose: function () { alert("onclose") },
onmessage:
function (evt)
{
//evt.data will be what the server sends in channel.send_message
console.log("evt.data received from authhandler: " + evt.data);
alert("evt.data is: " + evt.data)
}
};
var xhr = new XMLHttpRequest();
//changed to lowercase
xhr.onreadystatechange = function()
{
//alert("xhr.onReadyStateChange")
//error handling etc not included
if (xhr.readyState == 4 && xhr.status == 200)
{
token = xhr.responseText;
alert("token: " + token)
channel = new goog.appengine.Channel(token);
socket = channel.open(handler);
}
};
xhr.open("POST", "http://ting-1.appspot.com/authsender", true);
xhr.send(formData);
console.log("formData sent to authsender: " + formData);
}, false
)
</script>
</body>
</html>
In a chrome extension, you'll need to directly specify the path for the Channel javascript (https://talkgadget.google.com/talkgadget/channel.js). The request for /_ah/channel/jsapi can't be redirected by anything because the file that's trying to load it is local.