I am pulling data from MySQL into a web page and I can not see while I am stuck in my while loop.
For background I am pulling data from my database and trying to put it into objects that look something like this:
var SawtoothPassTrailhead = {
name: "Sawtooth Pass Trailhead",
lat: 36.453165,
long: -118.596751,
type: "backpacking",
//Title then link
seekAdventure: [],
blogs: ['Mineral King Loop a€“ Sequoia National Park (45 Mile Loop) - Backpackers Review' , 'https://backpackers-review.com/trip-reports/sequoia-mineral-king/'],
youtTube: []
};
The JSON data that is coming back from my DB call for my test looks like this:
[
{"TrailHeadID":"1",
"TrailHeadName":"Tanner Trail - Grand Canyon",
"TrailHeadLat":"36.03260",
"TrailHeadLong":"-111.85250",
"GuideTitle":"1 Week Traversing the Grand Canyon",
"GuideLink":"https://www.seekadventure.net/d/94-1-week-traversing-the-grand-canyon",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"2",
"TrailHeadName":"Badger Pass - Yosemite",
"TrailHeadLat":"37.66480",
"TrailHeadLong":"-119.66340",
"GuideTitle":"22 Hours of Driving, 1.5 Days of Snowshoeing, Yosemite National Park",
"GuideLink":"https://www.seekadventure.net/d/79-22-hours-of-driving-1-5-days-of-snowshoeing-yosemite-nationa",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"2",
"TrailHeadName":"Badger Pass - Yosemite",
"TrailHeadLat":"37.66480",
"TrailHeadLong":"-119.66340",
"GuideTitle":"Snowshoeing to Dewey Point in Yosemite (Socal Hike)r",
"GuideLink":"https://socalhiker.net/snowshoeing-to-dewey-point-in-yosemite/",
"GuideMediaType":"blog"
},{
"TrailHeadID":"3",
"TrailHeadName":"Descanso Beach - Catalina",
"TrailHeadLat":"33.35040",
"TrailHeadLong":"-118.32820",
"GuideTitle":"Kayak Camping Catalina Island",
"GuideLink":"https://www.seekadventure.net/d/76-kayak-camping-catalina-island",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"4",
"TrailHeadName":"Trans Catalina Trail",
"TrailHeadLat":"33.34030",
"TrailHeadLong":"-118.32620",
"GuideTitle":"Mini Trans Catalina Trail",
"GuideLink":"https://www.seekadventure.net/d/73-mini-trans-catalina-trip",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"4",
"TrailHeadName":"Trans Catalina Trail",
"TrailHeadLat":"33.34030",
"TrailHeadLong":"-118.32620",
"GuideTitle":"Backpacking the Trans-Catalina Trail (Bearfoot Theory)",
"GuideLink":"https://bearfoottheory.com/backpacking-the-trans-catalina-trail/",
"GuideMediaType":"blog"
},{
"TrailHeadID":"5",
"TrailHeadName":"High Sierra Trail",
"TrailHeadLat":"36.55470",
"TrailHeadLong":"-118.74890",
"GuideTitle":"High Sierra Trail Complete Guide",
"GuideLink":"https://www.seekadventure.net/d/22-california-high-sierra-trail-to-mt-whitney'",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"5",
"TrailHeadName":"High Sierra Trail",
"TrailHeadLat":"36.55470",
"TrailHeadLong":"-118.74890",
"GuideTitle":"High Sierra Trail (SoCal Hiker)",
"GuideLink":"https://socalhiker.net/overview-of-the-high-sierra-trail/",
"GuideMediaType":"blog"
},{
"TrailHeadID":"6",
"TrailHeadName":"Deer Springs Trail - San Jacinto",
"TrailHeadLat":"33.75300",
"TrailHeadLong":"-116.72270",
"GuideTitle":"Deer Springs Trail",
"GuideLink":"https://www.seekadventure.net/d/26-california-deer-springs-trail-san-jacinto-mountain",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"7",
"TrailHeadName":"Reflection Canyon",
"TrailHeadLat":"37.25220",
"TrailHeadLong":"-110.97350",
"GuideTitle":"Reflection Canyon",
"GuideLink":"https://www.seekadventure.net/d/24-utah-photographing-reflection-canyon",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"7",
"TrailHeadName":"Reflection Canyon",
"TrailHeadLat":"37.25220",
"TrailHeadLong":"-110.97350",
"GuideTitle":"Reflection Canyon Backpacking Guide (Clever Hiker)",
"GuideLink":"https://www.cleverhiker.com/blog/reflection-canyon-backpacking-guide",
"GuideMediaType":"blog"
},{
"TrailHeadID":"8",
"TrailHeadName":"Big Pine Lakes - North Fork Trail",
"TrailHeadLat":"37.12820",
"TrailHeadLong":"-118.42770",
"GuideTitle":"North Fork to 2nd Lake Sierra Nevada in a Snow Storm",
"GuideLink":"https://www.seekadventure.net/d/18-california-north-fork-to-2nd-lake-sierra-nevada-in-a-snow-storm",
"GuideMediaType":"SeekAdventure"
},{
"TrailHeadID":"8",
"TrailHeadName":"Big Pine Lakes - North Fork Trail",
"TrailHeadLat":"37.12820",
"TrailHeadLong":"-118.42770",
"GuideTitle":"Hiking To Big Pine Lakes via The North Fork Trail (Trail to Peak)",
"GuideLink":"https://trailtopeak.com/2017/07/09/hiking-to-big-pine-lakes-via-the-north-fork-trail/",
"GuideMediaType":"blog"
},{
"TrailHeadID":"9",
"TrailHeadName":"Fish Creek Wash Anza Borrego",
"TrailHeadLat":"33.03872",
"TrailHeadLong":"-116.09941",
"GuideTitle":"Jeeping in Fish Creek Wash Anza Borrego","GuideLink":"https://www.seekadventure.net/d/99-jeeping-in-fish-creek-wash-anza-borrego",
"GuideMediaType":"SeekAdventure"
}]
The problem is the hardcoded array of objects works fine but when I switch to my JSON loaded object array I just get a blank map. Here is my code and I can point out my troubleshooting:
var gmarkers1 = [];
var markers1 = [];
var markerCluster;
var infowindow;
var lastmarker = null;
var xmlhttp = new XMLHttpRequest();
var url = "getMyJSON.php";
var SawtoothPassTrailhead = {
name: "Sawtooth Pass Trailhead",
lat: 36.453165,
long: -118.596751,
type: "backpacking",
//Title then link
seekAdventure: [],
blogs: ['Mineral King Loop a€“ Sequoia National Park (45 Mile Loop) - Backpackers Review' , 'https://backpackers-review.com/trip-reports/sequoia-mineral-king/'],
youtTube: []
};
//Call PHP file and get JSON
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
var markers2 = new Array();
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var localTrailHeadID;
var trailHeadCounter = 0;
var TrailHeadObject;
var lastTrailHeadID = 0;
//set array conts all to zero
var seekAdventureCount;
var blogsCount;
var youtubeCount;
var j = 0;
//for each row returned by mySQL
for(i = 0; i < arr.length; i++){
localTrailHeadID = arr[i].TrailHeadID;
//if previuse trailhead is the same as the current trail head get info and add to correct array
if (localTrailHeadID == lastTrailHeadID){
if(arr[i].GuideMediaType == "SeekAdventure"){
TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideTitle;
console.log(arr[i].GuideTitle);
seekAdventureCount = seekAdventureCount + 1;
TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideLink;
seekAdventureCount = seekAdventureCount + 1;
}
if(arr[i].GuideMediaType == "blog"){
TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideTitle;
console.log(arr[i].GuideTitle);
blogsCount = blogsCount + 1;
TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideLink;
blogsCount = blogsCount + 1;
}
if(arr[i].GuideMediaType == "YouTube"){
TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideTitle;
console.log(arr[i].GuideTitle);
youtubeCount = youtubeCount + 1;
TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideLink;
youtubeCount = youtubeCount + 1;
}
}
//create new object and then add guide to correct array
else{
//add object to array of markers except on first round
if(j == 0){
j = j + 1;
}
else{
markers1[trailHeadCounter] = TrailHeadObject;
console.log(trailHeadCounter);
trailHeadCounter = trailHeadCounter + 1;
}
//create new trailhead object
TrailHeadObject = new Object();
//set array counters to zero
var seekAdventureCount =0;
var blogsCount = 0;
var youtubeCount = 0;
//set name lat and long
TrailHeadObject.name = arr[i].TrailHeadName;
console.log(arr[i].TrailHeadName);
TrailHeadObject.lat = arr[i].TrailHeadLat;
TrailHeadObject.long = arr[i].TrailHeadLong;
//set TrailHeadObject Guide arrays to empty
TrailHeadObject.seekAdventureGuideList = [];
TrailHeadObject.blogGuideList = [];
TrailHeadObject.youTubegGuideList = [];
//Add trail Guide
//check first guide media type and add to correct Array
if(arr[i].GuideMediaType == "SeekAdventure"){
TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideTitle;
console.log(arr[i].GuideTitle);
seekAdventureCount = seekAdventureCount + 1;
TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideLink;
seekAdventureCount = seekAdventureCount + 1;
}
if(arr[i].GuideMediaType == "blog"){
TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideTitle;
console.log(arr[i].GuideTitle);
blogsCount = blogsCount + 1;
TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideLink;
blogsCount = blogsCount + 1;
}
if(arr[i].GuideMediaType == "YouTube"){
TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideTitle;
console.log(arr[i].GuideTitle);
youtubeCount = youtubeCount + 1;
TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideLink;
youtubeCount = youtubeCount + 1;
}
} // end else statement
//set last trailhead ID
lastTrailHeadID = localTrailHeadID;
}//end for Loop
} //end my function
//markers1[trailHeadCounter+1] = TrailHeadObject;
//console.log(markers1[trailHeadCounter+1].name);
//testing
//console.log(markers1[0].name);
//console.log(markers1[0].long);
//console.log(markers1[0].lat);
//Proceses JSON Info and build Objects and place into markers1 arrray
///////////////////////////////
//add Hike Objects to Array////
///////////////////////////////
//markers1 = [
//SawtoothPassTrailhead
//];
/**
* Function to init map
*/
// Before we go looking for the passed parameters, set some defaults
// in case there are no parameters
var id;
var index = -1;
//set initial map values
var lat = 40.534900;
var lng = -101.343789;
var zoom = 4;
// If there are any parameters at eh end of the URL, they will be in location.search
// looking something like "?marker=3"
// skip the first character, we are not interested in the "?"
var query = location.search.substring(1);
// split the rest at each "&" character to give a list of "argname=value" pairs
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
// break each pair at the first "=" to obtain the argname and value
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0, pos).toLowerCase();
var value = pairs[i].substring(pos + 1).toLowerCase();
// process each possible argname - use unescape() if theres any chance of spaces
if (argname == "id") {
id = unescape(value);
}
if (argname == "marker") {
index = parseFloat(value);
}
if (argname == "lat") {
lat = parseFloat(value);
}
if (argname == "lng") {
lng = parseFloat(value);
}
if (argname == "zoom") {
zoom = parseInt(value)
