时间戳

首页 > 解决方案 > 添加错误值但不是正确值时显示未定义的内容

javascript - 添加错误值但不是正确值时显示未定义的内容

问题描述

我正在尝试将 json 文件中的数据添加到下面的 HTML 表中：

在(var i = "0";)我未定义的情况下，但是当我将其更改为时，(var i = "dv";)我什么也得不到。

不知道我哪里出错了，是什么导致了这个问题，我认为是这条线(for (var i = "dv"; i < data.length; i++) {)

代码如下，json文件为：https ://pastebin.com/embed_js/rhUz1U5r

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>

var currentTime = new Date()
var month = currentTime.getMonth()
var day = currentTime.getDate()
var dv = ('0' + '/' + month + '/' + day)

    $(function() {
        $.getJSON('spellData.json', function(data) {
            var content;
            for (var i = "dv"; i < data.length; i++) {

                content = $('<tr/>');

                    content.append("<table>");

                    content.append("<tr> <th> Prayer </th> <th> Start </th> <th> Jamaat </th> </tr>");

                    content.append("<tr> <td> Salat Al-Fajr: </td> <td> " + data.fajr_begins + " </td> <td> " + data.fajr_jamah + " </td> </tr> ");

                    content.append("<tr> <td> Sunrise: </td> <td> " + data.sunrise + " </td> <td> " + data.sunrise + " </td> </tr> ");

                    content.append("<tr> <td> Salat Al-Ishraq: </td> <td> " + data.ishraq + " </td> <td> " + data.ishraq + " </td> </tr> ");

                    content.append("<tr> <td> Salat Al-Zuhur: </td> <td> " + data.zuhr_begins + " </td> <td> " + data.zuhr_jamah + " </td> </tr> ");

                    content.append("<tr> <td> Salat Al-Asr: </td> <td> " + data.asr_mithl + " </td>  <td> " + data.asr_jamah + " </td>  </tr> ");

                    content.append("<tr> <td> Salat Al-Magrib </td> <td> " + data.maghrib_begins + "</td> <td> " + data.maghrib_jamah + " </td> </tr> ");

                    content.append("<tr> <td> Salat Al-Isha </td> <td> " + data.isha_begins + " </td>  <td> " + data.isha_jamah + " </td> </tr> ");

                    content.append("</table>");

                $('table').append(content);
            }
        });
    });
</script>
</head>
<body>
    <div id="djpyer"> </div>
    <table></table>
</body>

标签： javascriptjsonangularjscordova

解决方案

首先，您需要一个有效的 JSON 文件，然后您将能够将其转换为 JS 对象并对其进行处理。在您的数据中，您有两个键，11和12，我假设您只需要第一个11的值来构造表。

您需要操作的实际数据包含在数组中。要使用数组，您可以使用类中的内置方法Array。在这里，我使用Filter, withBoolean作为回调（不是构造函数）从数组中删除任何空值。然后我用forEach循环遍历数组的每个元素。

我试图弄清楚你在追求什么。根据您的代码，我设法执行了以下操作。请注意，该片段使用一个变量来存储字符串化的 JSON。您可以将其替换为$.JSON和回调以从文件中检索数据。

const table = $('#content')

$(function() {
  const data = JSON.parse(json_string)["11"].filter(Boolean);
  
  data.forEach(function(el) {

    table.append("<tr> <td> Salat Al-Fajr: </td> <td> " + el.fajr_begins + " </td> <td> " + el.fajr_jamah + " </td> </tr> ");

    table.append("<tr> <td> Sunrise: </td> <td> " + el.sunrise + " </td> <td> " + el.sunrise + " </td> </tr> ");

    table.append("<tr> <td> Salat Al-Ishraq: </td> <td> " + el.ishraq + " </td> <td> " + el.ishraq + " </td> </tr> ");

    table.append("<tr> <td> Salat Al-Zuhur: </td> <td> " + el.zuhr_begins + " </td> <td> " + el.zuhr_jamah + " </td> </tr> ");

    table.append("<tr> <td> Salat Al-Asr: </td> <td> " + el.asr_mithl + " </td>  <td> " + el.asr_jamah + " </td>  </tr> ");

    table.append("<tr> <td> Salat Al-Magrib </td> <td> " + el.maghrib_begins + "</td> <td> " + el.maghrib_jamah + " </td> </tr> ");

    table.append("<tr> <td> Salat Al-Isha </td> <td> " + el.isha_begins + " </td>  <td> " + el.isha_jamah + " </td> </tr> ");

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th> Prayer </th>
      <th> Start </th>
      <th> Jamaat </th>
    </tr>
  </thead>
  <tbody id="content"></tbody>
</table>

<script>
  const json_string = '{"11":[null,{"asr_jamah":"","asr_mithl":"14:11","d_date":"1st","fajr_begins":"05:47","fajr_jamah":"","isha_begins":"","isha_jamah":"","maghrib_begins":"15:57","maghrib_jamah":"","sunrise":"07:51","zuhr_begins":"11:54","zuhr_jamah":""},{"asr_jamah":"","asr_mithl":"14:10","d_date":"2nd","fajr_begins":"05:49","fajr_jamah":"","isha_begins":"","isha_jamah":"","maghrib_begins":"15:57","maghrib_jamah":"","sunrise":"07:52","zuhr_begins":"11:55","zuhr_jamah":""},{"asr_jamah":"","asr_mithl":"14:10","d_date":"3rd","fajr_begins":"05:50","fajr_jamah":"","isha_begins":"","isha_jamah":"","maghrib_begins":"15:56","maghrib_jamah":"","sunrise":"07:53","zuhr_begins":"11:55","zuhr_jamah":""},{"asr_jamah":"","asr_mithl":"14:09","d_date":"4th","fajr_begins":"05:51","fajr_jamah":"","isha_begins":"","isha_jamah":"","maghrib_begins":"15:56","maghrib_jamah":"","sunrise":"07:55","zuhr_begins":"11:55","zuhr_jamah":""},{"asr_jamah":"","asr_mithl":"14:09","d_date":"5th","fajr_begins":"05:52","fajr_jamah":"","isha_begins":"","isha_jamah":"","maghrib_begins":"15:55","maghrib_jamah":"","sunrise":"07:56","zuhr_begins":"11:56","zuhr_jamah":""}],"12":[{"bmm_begins":0,"bmm_jamah":0},{"bmm_begins":"12:30 pm","bmm_jamah":"1:30 pm"},{"bmm_begins":"N/A","bmm_jamah":"N/A"},{"bmm_begins":"N/A","bmm_jamah":"N/A"},{"bmm_begins":"N/A","bmm_jamah":"N/A"}]}'
</script>

推荐阅读