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

【问题标题】：how to write code to append code and run values from the given json data如何编写代码以附加代码并从给定的 json 数据运行值
【发布时间】：2019-10-22 19:07:42
【问题描述】：

通过这段代码得到结果是

https://upxstart.com/api.html

我想在周一、周二、周三、周四、周五、周六、周日的列中显示“Y”或“N”

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

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>

【问题讨论】：

  • user.days 是一个数组。因此将打印整个数组，而不仅仅是运行的值。
  • 那我该怎么写？？？

标签： javascript html json html-table


【解决方案1】：

到了日子，你应该写一些这样的东西，

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

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2019-11-26
    • 1970-01-01
    • 1970-01-01
    • 2015-10-04
    • 1970-01-01
    • 1970-01-01
    • 2022-01-18
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode