如何编写代码以添加代码并从给定的json数据运行值

时间:2019-06-07 09:22:05

标签: javascript html json html-table

通过此代码得到的结果是

https://upxstart.com/api.html

我想在“星期一”,“星期二”,“星期三”,“星期四”,“星期五”,“星期六”,“星期日”中显示“ Y”或“ N”

无法从json数据中获取“运行”值。我使用user.days来获取'run'的值,但是它不起作用。请告诉我正确的代码写在那里。

json数据为:

{
  "total": 6,
  "response_code": 200,
  "trains": [{
      "to_station": {
        "code": "JAT",
        "lat": 32.7058783,
        "name": "JAMMU TAWI",
        "lng": 74.8798454
      },
      "dest_arrival_time": "12:35",
      "from_station": {
        "code": "GKP",
        "lat": 29.4438165,
        "name": "GORAKHPUR",
        "lng": 75.67026469999999
      },
      "number": "15097",
      "classes": [{
          "name": "FIRST CLASS",
          "code": "FC"
        }, {
          "name": "THIRD AC",
          "code": "3A"
        }, {
          "name": "3rd AC ECONOMY",
          "code": "3E"
        },
        {
          "name": "SLEEPER CLASS",
          "code": "SL"
        }, {
          "name": "FIRST AC",
          "code": "1A"
        }, {
          "name": "SECOND AC",
          "code": "2A"
        }, {
          "name": "SECOND SEATING",
          "code": "2S"
        }, {
          "name": "AC CHAIR CAR",
          "code": "CC"
        }
      ],
      "travel_time": "46:35",
      "name": "AMARNATH EXP",
      "src_departure_time": "14:00",
      "days": [{
        "runs": "N",
        "code": "MON"
      }, {
        "runs": "N",
        "code": "TUE"
      }, {
        "runs": "FRI"
      }, {
        "runs": "N",
        "code": "SAT"
      }, {
        "runs": "N",
        "code": "SUN"
      }]
    },
    {
      "to_station": {
        "code": "JAT",
        "lat": 32.7058783,
        "name": "JAMMU TAWI",
        "lng": 74.8798454
      },
      "dest_arrival_time": "12:35",
      "from_station": {
        "code": "GKP",
        "lat": 29.4438165,
        "name": "GORAKHPUR",
        "lng": 75.67026469999999
      },
      "number": "15651",
      "classes": [{
        "name": "FIRST CLASS",
        "code": "FC"
      }, {
        "name": "THIRD AC",
        "code": "3A"
      }, {
        "name": "3rd AC ECONOMY",
        "code": "3E"
      }, {
        "name": "SLEEPER CLASS",
        "code": "SL"
      }, {
        "name": "FIRST AC",
        "code": "1A"
      }, {
        "name": "SECOND AC",
        "code": "2A"
      }, {
        "name": "SECOND SEATING",
        "code": "2S"
      }, {
        "name": "AC CHAIR CAR",
        "code": "CC"
      }],
      "travel_time": "46:35",
      "name": "GHY-JAT LOHIT EXPRESS",
      "src_departure_time": "14:00",
      "days": [{
        "runs": "Y",
        "code": "MON"
      }, {
        "runs": "N",
        "code": "TUE"
      }, {
        "runs": "N",
        "code": "WED"
      }, {
        "runs": "N",
        "code": "THU"
      }, {
        "runs": "N",
        "code": "FRI"
      }, {
        "runs": "N",
        "code": "SAT"
      }, {
        "runs": "N",
        "code": "SUN"
      }]
    }, {
      "to_station": {
        "code": "JAT",
        "lat": 32.7058783,
        "name": "JAMMU TAWI",
        "lng": 74.8798454
      },
      "dest_arrival_time": "13:40",
      "from_station": {
        "code": "GKP",
        "lat": 29.4438165,
        "name": "GORAKHPUR",
        "lng": 75.67026469999999
      },
      "number": "15655",
      "classes": [{
        "name": "FIRST CLASS",
        "code": "FC"
      }, {
        "name": "THIRD AC",
        "code": "3A"
      }, {
        "name": "3rd AC ECONOMY",
        "code": "3E"
      }, {
        "name": "SLEEPER CLASS",
        "code": "SL"
      }, {
        "name": "FIRST AC",
        "code": "1A"
      }, {
        "name": "SECOND AC",
        "code": "2A"
      }, {
        "name": "SECOND SEATING",
        "code": "2S"
      }, {
        "name": "AC CHAIR CAR",
        "code": "CC"
      }],
      "travel_time": "47:00",
      "name": "KYQ - SVDK EXPRESS",
      "src_departure_time": "14:40",
      "days": [{
        "runs": "N",
        "code": "MON"
      }, {
        "runs": "N",
        "code": "TUE"
      }, {
        "runs": "N",
        "code": "WED"
      }, {
        "runs": "N",
        "code": "THU"
      }, {
        "runs": "N",
        "code": "FRI"
      }, {
        "runs": "N",
        "code": "SAT"
      }, {
        "runs": "Y",
        "code": "SUN"
      }]
    }, {
      "to_station": {
        "code": "JAT",
        "lat": 32.7058783,
        "name": "JAMMU TAWI",
        "lng": 74.8798454
      },
      "dest_arrival_time": "11:50",
      "from_station": {
        "code": "GKP",
        "lat": 29.4438165,
        "name": "GORAKHPUR",
        "lng": 75.67026469999999
      },
      "number": "12491",
      "classes": [{
        "name": "FIRST CLASS",
        "code": "FC"
      }, {
        "name": "THIRD AC",
        "code": "3A"
      }, {
        "name": "3rd AC ECONOMY",
        "code": "3E"
      }, {
        "name": "SLEEPER CLASS",
        "code": "SL"
      }, {
        "name": "FIRST AC",
        "code": "1A"
      }, {
        "name": "SECOND AC",
        "code": "2A"
      }, {
        "name": "SECOND SEATING",
        "code": "2S"
      }, {
        "name": "AC CHAIR CAR",
        "code": "CC"
      }],
      "travel_time": "21:50",
      "name": "MOURDHWAJ EXPRESS",
      "src_departure_time": "14:00",
      "days": [{
        "runs": "N",
        "code": "MON"
      }, {
        "runs": "N",
        "code": "TUE"
      }, {
        "runs": "N",
        "code": "WED"
      }, {
        "runs": "N",
        "code": "THU"
      }, {
        "runs": "N",
        "code": "FRI"
      }, {
        "runs": "N",
        "code": "SAT"
      }, {
        "runs": "Y",
        "code": "SUN"
      }]
    }, {
      "to_station": {
        "code": "JAT",
        "lat": 32.7058783,
        "name": "JAMMU TAWI",
        "lng": 74.8798454
      },
      "dest_arrival_time": "12:35",
      "from_station": {
        "code": "GKP",
        "lat": 29.4438165,
        "name": "GORAKHPUR",
        "lng": 75.67026469999999
      },
      "number": "12587",
      "classes": [{
        "name": "FIRST CLASS",
        "code": "FC"
      }, {
        "name": "THIRD AC",
        "code": "3A"
      }, {
        "name": "3rd AC ECONOMY",
        "code": "3E"
      }, {
        "name": "SLEEPER CLASS",
        "code": "SL"
      }, {
        "name": "FIRST AC",
        "code": "1A"
      }, {
        "name": "SECOND AC",
        "code": "2A"
      }, {
        "name": "SECOND SEATING",
        "code": "2S"
      }, {
        "name": "AC CHAIR CAR",
        "code": "CC"
      }],
      "travel_time": "22:15",
      "name": "AMAR NATH EXP",
      "src_departure_time": "14:20",
      "days": [{
        "runs": "Y",
        "code": "MON"
      }, {
        "runs": "N",
        "code": "TUE"
      }, {
        "runs": "N",
        "code": "WED"
      }, {
        "runs": "N",
        "code": "THU"
      }, {
        "runs": "N",
        "code": "FRI"
      }, {
        "runs": "N",
        "code": "SAT"
      }, {
        "runs": "N",
        "code": "SUN"
      }]
    }, {
      "to_station": {
        "code": "JAT",
        "lat": 32.7058783,
        "name": "JAMMU TAWI",
        "lng": 74.8798454
      },
      "dest_arrival_time": "12:35",
      "from_station": {
        "code": "GKP",
        "lat": 29.4438165,
        "name": "GORAKHPUR",
        "lng": 75.67026469999999
      },
      "number": "15653",
      "classes": [{
        "name": "FIRST CLASS",
        "code": "FC"
      }, {
        "name": "THIRD AC",
        "code": "3A"
      }, {
        "name": "3rd AC ECONOMY",
        "code": "3E"
      }, {
        "name": "SLEEPER CLASS",
        "code": "SL"
      }, {
        "name": "FIRST AC",
        "code": "1A"
      }, {
        "name": "SECOND AC",
        "code": "2A"
      }, {
        "name": "SECOND SEATING",
        "code": "2S"
      }, {
        "name": "AC CHAIR CAR",
        "code": "CC"
      }],
      "travel_time": "46:35",
      "name": "AMARNATH EXPRESS",
      "src_departure_time": "14:00",
      "days": [{
        "runs": "N",
        "code": "MON"
      }, {
        "runs": "N",
        "code": "TUE"
      }, {
        "runs": "Y",
        "code": "WED"
      }, {
        "runs": "N",
        "code": "THU"
      }, {
        "runs": "N",
        "code": "FRI"
      }, {
        "runs": "N",
        "code": "SAT"
      }, {
        "runs": "N",
        "code": "SUN"
      }]
    }
  ],
  "debit": 1
}
<html>
    <head>
        <title>train api</title>
    </head>

    <body>

   <h1>Users List</h1>
 <table id="users-list">
 <thead>
 <tr>
 <th>From</th>
 <th>To</th>
 <th>Train Name</th>
 <th>train No.</th>
 <th>Departure Time</th>
 <th>Arival Time</th>
 <th>Travel Time</th>
 <th>Mon</th>
 <th>Tue</th>
 <th>Wed</th>
 <th>Thu</th>
 <th>Fri</th>
 <th>Sat</th>
 <th>Sun</th>
 <th>Name</th>
 </tr>
 </thead>
 <tbody>
 <!-- load users here -->
 </tbody>
 </table>



  <script> 
   window.onload = () => {
 const SERVER_URL = 'https://api.railwayapi.com/v2/between/source/gkp/dest/jat/date/06-06-2019/apikey/--------/';
 // get table element
 const table = document.querySelector('#users-list');
 // call API using `fetch`
 fetch(SERVER_URL)
     .then(res => res.json())
     .then(res => {

        // loop over all users
        res.trains.map(user => {

        // create a `tr` element
        const tr = document.createElement('tr');

        // create from station `td`
        const frSt = document.createElement('td');
        frSt.textContent = user.from_station.name;

            // create To station `td`
        const toSt = document.createElement('td');
        toSt.textContent = user.to_station.name;

        // create Train Name `td`
        const trNm = document.createElement('td');
        trNm.textContent = user.name;

        // create train no. `td`
        const idTd = document.createElement('td');
        idTd.textContent = user.number;

        // create Departure time `td`
        const deTm = document.createElement('td');
        deTm.textContent = user.src_departure_time;

        // create Arival time `td`
        const arTm = document.createElement('td');
        arTm.textContent = user.dest_arrival_time;

        // create Travel time `td`
        const trTm = document.createElement('td');
        trTm.textContent = user.travel_time;

        // create Mon `td`
        const mon = document.createElement('td');
        mon.textContent = user.days;

        // create Name `td`
        const nameTd = document.createElement('td');
        nameTd.textContent = `${user.first_name} ${user.last_name}`;

        //create email `td`
        const emailTd = document.createElement('td');
        emailTd.textContent = user.email;

        // add tds to tr
        tr.appendChild(frSt);
        tr.appendChild(toSt);
        tr.appendChild(trNm);
        tr.appendChild(idTd);
        tr.appendChild(deTm);
        tr.appendChild(arTm);
        tr.appendChild(trTm);
        tr.appendChild(mon);
        tr.appendChild(nameTd);
        tr.appendChild(emailTd)

        // app tr to table
        table.querySelector('tbody').appendChild(tr);
       });
     })
     .catch(err => console.log('Error:', err));
};
   </script>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

谈到几天,你应该写这样的东西,

user.days.forEach(day => {
   let day1 = document.createElement('td');
   day1.textContent = day.runs;
});