javascript - 将 JSON 解析为对象数组时陷入 while 循环

Question

我正在将数据从 MySQL 提取到网页中，但当我陷入 while 循环时我看不到。

对于背景，我从数据库中提取数据并尝试将其放入如下所示的对象中:

var SawtoothPassTrailhead = {
  name: "Sawtooth Pass Trailhead",
  lat:  36.453165,
  long:  -118.596751,
  type: "backpacking", 

  //Title then link
  seekAdventure: [],
  blogs: ['Mineral King Loop – Sequoia National Park (45 Mile Loop) - Backpackers Review' , 'https://backpackers-review.com/trip-reports/sequoia-mineral-king/'],
  youtTube: []
};

从我的测试数据库调用返回的 JSON 数据如下所示:

[{"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"}]

我正在根据数据创建对象，这样我就可以通过弹出窗口将每个对象作为标记插入到谷歌地图上。棘手的部分是上面 JSON 中以相同 TrailHeadID 开头的任何内容都需要位于同一个对象中，因此它与 Google map 上的弹出气泡相同。这就是我下面的代码中使用 wile 循环的地方。

我在 while 循环结束之前通过 console.log() ，看起来它被捕获为 2，因此它正确处理第一个，然后不递增:

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var localTrailHeadID;
    var trailHeadCounter;
    var TrailHeadObject

    //set array conts all to zero
    var seekAdventureCount;
    var blogsCount;
    var youtubeCount;


    //for each row returned by mySQL
    for(i = 0; i < arr.length; i++){

      localTrailHeadID = arr[i].TrailHeadID;

      //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;
      TrailHeadObject.lat = arr[i].TrailHeadLat;
      TrailHeadObject.long = arr[i].TrailHeadLong;

      //set TrailHeadObject Guide arrays to empty
      TrailHeadObject.seekAdventureGuideList = [];
      TrailHeadObject.blogGuideList = [];
      TrailHeadObject.youTubegGuideList = [];



      //Add trail Guides
      while(localTrailHeadID == arr[i].TrailHeadID ){
        //check first guide media type and add to correct Array
        if(arr[i].GuideMediaType == "SeekAdventure"){
          TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = 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;
          blogsCount = blogsCount + 1;
          TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideLink;
          blogsCount = blogsCount + 1;
        }
        if(arr[i].GuideMediaType == "YouTube"){
          TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideTitle;
          youtubeCount = youtubeCount + 1;
          TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideLink;
          youtubeCount = youtubeCount + 1;
        }
        console.log(arr[i+1].TrailHeadID);
        localTrailHeadID = arr[i+1].TrailHeadID;

      } //end while loop adding guides

      //add object to array of markers
      markers1[i] = TrailHeadObject;

    }//end for Loop

} //end my function

我不明白为什么 while 循环没有中断。这行不应该打破它:localTrailHeadID = arr[i+1].TrailHeadID;基于我上面的输入数据？

Answer 1

问题是您没有在 while 循环内递增 i

这意味着循环条件将始终比较数组中 i 和 i + 1 对象的 TrailHeadID 属性。如果数组中的对象具有相同的属性值，则 while 循环的条件将始终为 true。

我将这样做:

const arr = [{"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"}];
const getPropName = (o) => {
  if(o.GuideMediaType == "SeekAdventure") {
    return "seekAdventureGuideList";
  } else if (o.GuideMediaType == "blog"){
    return "blogGuideList"
  } else if(o.GuideMediaType == "YouTube") {
    return "youTubegGuideList"; 
  }
  return "unknown";
}

const markers = arr.reduce((a, c) => {
  const found = a.find(v => v.id == c.TrailHeadID);
  const propName = getPropName(c);
  if (found) {
    found[propName] = [...(found[propName] || []), c.GuideTitle, c.GuideLink];
  } else {
    a.push({
      id: c.TrailHeadID,
      name: c.TrailHeadName,
      lat: c.TrailHeadLat,
      long: c.TrailHeadLong,
      [propName]: [c.GuideTitle, c.GuideLink]
    });
  }
  return a;
}, []);

console.log(markers);