Fatal编程技术网
  • javascript/
  • Javascript 用JSON数据填充列表项

Javascript 用JSON数据填充列表项

javascript html api

Javascript 用JSON数据填充列表项,javascript,html,api,Javascript,Html,Api,我需要帮助将API中的JSON数据转换为无序列表中的项，以便每个段都是一个单独的项。我计划使用if、elseIf和else语句来设置图标。我有一个脚本来设置时间，但我不知道如何将每个片段转换为li，这正是我需要帮助的 如何将其转换为： segments: Array(5) 0: bounds: {maximum: {…}, minimum: {…}} from: {origin: {…}} times: {start: "2021-04-20T14:25:00"

我需要帮助将API中的JSON数据转换为无序列表中的项，以便每个段都是一个单独的项。我计划使用if、elseIf和else语句来设置图标。我有一个脚本来设置时间，但我不知道如何将每个片段转换为li，这正是我需要帮助的

如何将其转换为：

segments: Array(5)
 0:
  bounds: {maximum: {…}, minimum: {…}}
  from: {origin: {…}}
  times: {start: "2021-04-20T14:25:00", end: "2021-04-20T14:28:00", durations: {…}}
  to: {stop: {…}}
  type: "walk"
  __proto__: Object
 1:
  bounds: {maximum: {…}, minimum: {…}}
  bus: {bike-rack: "false", easy-access: "true", wifi: "false"}
  route: {key: 662, number: 662, name: "Route 662 Richmond", customer-type: "regular", coverage: "feeder", …}
  times: {start: "2021-04-20T14:28:00", end: "2021-04-20T14:40:00", durations: {…}}
  type: "ride"
  variant: {key: "662-0-U", name: "Richmond to University of Manitoba"}
  __proto__: Object
 2:
  bounds: {maximum: {…}, minimum: {…}}
  from: {stop: {…}}
  times: {start: "2021-04-20T14:40:00", end: "2021-04-20T14:59:00", durations: {…}}
  to: {stop: {…}}
  type: "transfer"
  __proto__: Object
 3:
  bounds: {maximum: {…}, minimum: {…}}
  bus: {bike-rack: "false", easy-access: "true", wifi: "false"}
  route: {key: 74, number: 74, name: "Route 74 Kenaston", customer-type: "regular", 
  coverage: "regular", …}
  times: {start: "2021-04-20T14:59:00", end: "2021-04-20T15:24:00", durations: {…}}
  type: "ride"
  variant: {key: "74-1-P", name: "Kenaston to Polo Park"}
  __proto__: Object
 4:
  bounds: {maximum: {…}, minimum: {…}}
  from: {stop: {…}}
  times: {start: "2021-04-20T15:24:00", end: "2021-04-20T15:25:00", durations: {…}}
  to: {destination: {…}}
  type: "walk"
  __proto__: Object

 length: 5
 __proto__: Array(0)
为此：

<div class="bus-container">
    <ul class="my-trip">
      <li><span class="material-icons">exit_to_app</span> Depart at 9:55:00 AM.</li>
      <li><span class="material-icons">directions_walk</span>Walk for 6 minutes to stop #50577 - Northbound St Mary's at
        Avalon</li>
      <li><span class="material-icons">directions_bus</span>Ride the Route 14 Ellice-St. Mary's for 23 minutes.</li>
      <li><span class="material-icons">transfer_within_a_station</span>Transfer from stop #10643 - Northbound Fort at
        Graham to stop #10611 - Eastbound Graham at Fort (Wpg Square)</li>
      <li><span class="material-icons">directions_bus</span>Ride the Route 16 Selkirk-Osborne for 16 minutes.</li>
      <li><span class="material-icons">transfer_within_a_station</span>Transfer from stop #30296 - Westbound Selkirk at
        Arlington to stop #30295 - Northbound Arlington at Selkirk</li>
      <li><span class="material-icons">directions_bus</span>Ride the Route 71 Arlington for 13 minutes.</li>
      <li><span class="material-icons">directions_walk</span>Walk for 3 minutes to your destination, arriving at
        11:00:00 AM</li>
    </ul>
  </div>



    

  • 上午9:55:00离开至应用程序
    • 

  • 方向#步行6分钟可停#50577-圣玛丽北行
阿瓦隆
    • 

  • 方向：乘坐14号线Ellice-St.Mary's巴士23分钟
    • 

  • 在车站内换车从车站10643换车-福特北行
格雷厄姆站#10611-格雷厄姆堡东行（Wpg广场）
    • 

  • 方向：乘坐16号线塞尔科克·奥斯本16分钟
    • 

  • 在车站内换车从车站30296换车-塞尔柯克西行
阿灵顿站#30295-塞尔柯克阿灵顿北行
    • 

  • 方向：乘坐71路阿灵顿巴士13分钟
    • 

  • 方向\步行3分钟到达目的地，到达
上午11:00:00
    •
这是我的全部代码

let mapboxApiKey = "pk.eyJ1IjoibmFuZGluaS1hIiwiYSI6ImNrbW1iN2xqdjFqYmYycG80bmo2bDYwN24ifQ.GQN5FI2XaZYpt8KKxYcMQQ";
let transitApiKey = "p7qbH-VgW-2M5BRlkbwv";
let originForm = document.querySelector(".origin-form");
let originInput = document.querySelector(".origin-form input");
let destinationForm = document.querySelector(".destination-form");
let destinationInput = document.querySelector(".destination-form input");
let origins = document.querySelector(".origins");
let destinations = document.querySelector(".destinations");
let planTripBtn = document.querySelector(".plan-trip");
let myTrip = document.querySelector(".my-trip");
let originLong;
let originLat;
let destinationLong;
let destingationLat;
origins.innerHTML = "";
destinations.innerHTML = "";
myTrip.innerHTML = "";

originForm.onsubmit = e => {
  e.preventDefault();
  if (originInput.value.length > 0) {
    getOriginLocations(originInput.value);
  }
}

originForm.onclick = function () {
  if (originInput.value.length > 0) {
    origins.innerHTML = "";
    originInput.value = "";
  }
}

destinationForm.onsubmit = e => {
  e.preventDefault();
  if (destinationInput.value.length > 0) {
    getDestinationLocations(destinationInput.value);
  }
}

destinationForm.onclick = function () {
  if (originInput.value.length > 0) {
    destinations.innerHTML = "";
    destinationInput.value = "";
  }
}

planTripBtn.onclick = function () {
  if (originLong !== null && originLat !== null && destinationLong !== null && destingationLat !== null) {
    getRoute(originLong, originLat, destinationLong, destinationLat);
  }
}

async function getOriginLocations(searchedOrigin) {
  const originResponse = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchedOrigin}.json?bbox=-97.325875,49.766204,-96.953987,49.99275&access_token=${mapboxApiKey}`);
  const originData = await originResponse.json();
  originData.features.forEach(originLocation => {
    let originPlaceNameData = originLocation.place_name.split(", ");
    let originLocationName = originPlaceNameData[0];
    let originLocationAddress = originPlaceNameData[1];

    origins.insertAdjacentHTML("afterbegin", `
      <li data-long="${originLocation.geometry.coordinates[0]}" data-lat="${originLocation.geometry.coordinates[1]}">
      <div class="name">${originLocationName}</div>
      <div>${originLocationAddress}</div>
      </li>
    `);
  });

  origins.onclick = e => {
    let originElement = e.target.closest('li');
    if (originElement !== null) {
      originElement.className = "selected";
      originLong = originElement.dataset.long;
      originLat = originElement.dataset.lat;
    }
  }
}

async function getDestinationLocations(searchedDestination) {
  const destinationResponse = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchedDestination}.json?bbox=-97.325875,49.766204,-96.953987,49.99275&access_token=${mapboxApiKey}`);
  const destinationData = await destinationResponse.json();
  destinationData.features.forEach(destinationLocation => {
    let destinationPlaceNameData = destinationLocation.place_name.split(", ");
    let destinationLocationName = destinationPlaceNameData[0];
    let destinationLocationAddress = destinationPlaceNameData[1];

    destinations.insertAdjacentHTML("afterbegin", `
    <li data-long="${destinationLocation.geometry.coordinates[0]}" data-lat="${destinationLocation.geometry.coordinates[1]}">
    <div class="name">${destinationLocationName}</div>
    <div>${destinationLocationAddress}</div>
  </li>
    `);
  });

  destinations.onclick = e => {
    let destinationElement = e.target.closest('li');
    if (destinationElement !== null) {
      destinationElement.className = "selected";
      destinationLong = destinationElement.dataset.long;
      destinationLat = destinationElement.dataset.lat;
    }
  }
}

async function getRoute(originLong, originLat, destinationLong, destinationLat) {
  const routeResponse = await fetch(`https://api.winnipegtransit.com/v2/trip-planner.json?api-key=${transitApiKey}&origin=geo/${originLat},${originLong}&destination=geo/${destinationLat},${destinationLong}`);
  const routeData = await routeResponse.json();
  let hourArray = [];
  let minutesArray = [];
  let durationsArray = [];
  let minHour;
  let minMinutes;
  let minDuration;

  routeData.plans.forEach(route => {
    let date = new Date(route.times.end);
    let hours = date.getHours();
    let minutes;
    if (hours === minHour) {
      minutes = date.getMinutes();
      minutesArray.push(minutes);
    }
    hourArray.push(hours);
  });

  minHour = Math.min(...hourArray);
  console.log(minHour);

  routeData.plans.forEach(route => {
    let date = new Date(route.times.end);
    let hours = date.getHours();
    let minutes;
    if (hours === minHour) {
      minutes = date.getMinutes();
      minutesArray.push(minutes);
    }
  });

  minMinutes = Math.min(...minutesArray);
  console.log(minMinutes);

  routeData.plans.forEach(route => {
    let date = new Date(route.times.end);
    let hours = date.getHours();
    let minutes;
    let durations;
    if (hours === minHour) {
      minutes = date.getMinutes();
      if (minMinutes === minMinutes) {
        durations = route.times.durations.total;
        durationsArray.push(durations);
      }
    }
  });

  minDuration = Math.min(...durationsArray);
  console.log(minDuration);

  routeData.plans.forEach(route => {
    let date = new Date(route.times.end);
    let hours = date.getHours();
    let minutes;
    let durations;
    let getSegmentDuration;
    let icon;
    let stepInfo;

    if (hours === minHour) {
      minutes = date.getMinutes();
      if (minMinutes === minMinutes) {
        durations = route.times.durations.total;
        if (durations === minDuration) {
          let startDate = new Date(route.times.start);
          let startHour = startDate.getHours();
          let startTime;
          let endTime;

          if (startHour <= 12) {
            startTime = `${startHour}:${startDate.getMinutes()}:${startDate.getSeconds()} AM`;
          } else {
            startTime = `${startHour - 12}:${startDate.getMinutes()}:${startDate.getSeconds()} PM`;
          }

          if (hours <= 12) {
            endTime = `${hours}:${date.getMinutes()}:${date.getSeconds()} AM`;
          } else {
            endTime = `${hours - 12}:${date.getMinutes()}:${date.getSeconds()} PM`;
          }

          let myTripText = "";

          //<li><span class="material-icons">exit_to_app</span> Depart at ${startTime}.</li>

          route.segments.forEach(segment => {
            getSegmentDuration = segment.times.durations.total

            if (segment.type === "walk") {
              icon = `<span class="material-icons">directions_walk</span>`;

              if (segment.to.stop !== null) {
                stepInfo = `Walk for ${getSegmentDuration} minutes to stop #${segment.to.stop.key.value} - ${segment.to.stop.name}`
              } else if (segment.to.stop === null && segment.to.destination !== null) {
                stepInfo = `Walk for ${getSegmentDuration} to your destination, arriving at ${endTime}`;
              }

            } else if (segment.type === "ride") {
              icon = `<span class="material-icons">directions_bus</span>`;
              stepInfo = `Ride the ${segment.route.name} for ${getSegmentDuration} minutes`;
            } else if (segment.type === "transfer") {
              icon = `<span class="material-icons">transfer_within_a_station</span>`;
              stepInfo = `Transfer from stop #${segment.from.stop.key} - ${segment.from.stop.name} to stop #${segment.to.stop.key} - ${segment.to.stop.name}`;
            }

              myTripText += `<li>${icon}${stepInfo}<li>`;
          });
          console.log(myTripText);
          myTrip.innerHTML = myTripText;
        }
      }
    }
  });

  // let date = new Date("2021-04-19T20:12:00");
  // let time = date.getHours();
  console.log(routeData);
  // console.log(time);
}

let mapboxApiKey=“pk.eyj1ijoibmfugluas1hiiwiysi6imnrbw1in2xqdjfqymyycg80bmo2bdywn24ifq.gqn5fi2xazypt8kkkxycmqq”；
让transitApiKey=“p7qbH-VgW-2M5BRlkbwv”；
让originForm=document.querySelector（“.originForm”）；
让originInput=document.querySelector（“.originforminput”）；
让destinationForm=document.querySelector（“.destinationForm”）；
让destinationInput=document.querySelector（“.destination form input”）；
让origins=document.querySelector（“.origins”）；
let destinations=document.querySelector（“.destinations”）；
let planTripBtn=document.querySelector（“.plan trip”）；
让myTrip=document.querySelector（“.myTrip”）；
让原著长；
让原创；
让命运长久；
让命运来吧；
origins.innerHTML=“”；
destinations.innerHTML=“”；
myTrip.innerHTML=“”；
originForm.onsubmit=e=>{
e、 预防默认值（）；
如果（originInput.value.length>0）{
getOriginLocations（originInput.value）；
}
}
originForm.onclick=函数（）{
如果（originInput.value.length>0）{
origins.innerHTML=“”；
originInput.value=“”；
}
}
destinationForm.onsubmit=e=>{
e、 预防默认值（）；
如果（destinationInput.value.length>0）{
getDestinationLocations（destinationInput.value）；
}
}
destinationForm.onclick=函数（）{
如果（originInput.value.length>0）{
destinations.innerHTML=“”；
destinationInput.value=“”；
}
}
planTripBtn.onclick=函数（）{
if（originLong！==null&&originLat！==null&&destinationLong！==null&&destinationlat！==null）{
getRoute（原始路线、原始路线、目的路线、目的路线）；
}
}
异步函数getOriginLocations（searchedOrigin）{
const originResponse=等待获取(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchedOrigin}.json？bbox=-97.325875,49.766204，-96.953987,49.99275&access_-token=${mapboxApiKey}`）；
const originData=await originResponse.json（）；
originData.features.forEach（originLocation=>{
让originPlaceNameData=originLocation.place\u name.split（“，”）；
让originLocationName=originPlaceNameData[0]；
让originLocationAddress=originPlaceNameData[1]；
origins.insertAdjacentHTML（“afterbegin”`

  • 
${originLocationName}
${originLocationAddress}

    • 
`);
});
origins.onclick=e=>{
让originElement=e.target.nexist（'li'）；
if（originElement！==null）{
originElement.className=“已选定”；
originLong=originElement.dataset.long；
originLat=originElement.dataset.lat；
}
}
}
异步函数getDestinationLocations（searchedDestination）{
const destinationResponse=等待获取(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchedDestination}.json？bbox=-97.325875,49.766204，-96.953987,49.99275&access_-token=${mapboxApiKey}`）；
const destinationData=等待destinationResponse.json（）；
destinationData.features.forEach（destinationLocation=>{
让destinationPlaceNameData=destinationLocation.place\u name.split（“，”）；
让destinationLocationName=destinationPlaceNameData[0]；
让destinationLocationAddress=destinationPlaceNameData[1]；
destinations.insertAdjacentHTML（“afterbegin”`

  • 
${destinationLocationName}
${destinationLocationAddress}

    • 
`);
});
destinations.onclick=e=>{
设destinationElement=e.target.nexist（'li'）；
if（destinationElement！==null）{
destinationElement.className=“已选定”；
destinationLong=destinationElement.dataset.long；
destinationLat=destinationElement.dataset.lat；
}
}
}
异步函数getRoute（originLong、originLat、destinationLong、destinationLat）{
const routerresponse=等待获取(`https://api.winnipegtransit.com/v2/trip-planner.json?api-key=${transitApiKey}&origin=geo/${originLat}，${originLong}&destination=geo/${destinationLat}，${destinationLong}）；
const routeData=wait routerresponse.json（）；
让hourArray=[]；
让minutesArray=[]；
设durationsArray=[]；
让我们在一小时之内；
让我等几分钟；
让我们专注；
routeData.plans.forEach（路线=>{
let date=新日期（route.times.end）；
让hours=date.getHours（）；
让我们用分钟；
如果（小时===分钟小时）{
分钟=date.getMinutes（）；
分钟数组。推送（分钟）；
}
hourArray.push（小时）；
});
minHour=Math.min（…hourArray）；
控制台日志（分钟小时）；
routeData.plans.forEach（路线=>{
let date=新日期（route.times.end）；
让hours=date.getHours（）；
让我们用分钟；
如果（小时===分钟小时）{