JSON对象转换器到交互式html [关闭]

【问题标题】：JSON object converter to interactive html [closed]JSON对象转换器到交互式html [关闭]
【发布时间】：2015-06-22 03:21:15
【问题描述】：

我正在使用 Node.JS 并处理看起来像这样的大型 JSON 对象（请注意格式化时）

    {
   "_id": "552ecae96054158575914f50",
   "Wpt-1": {
      "Lat": "34.843213",
      "Lon": "-118.005453",
      "Alt": 5000,
      "Ty": 4,
      "Scale-Lat": 6,
      "Scale-Lon": 6,
      "Scale-Alt": 4,
      "Tu": 1,
      "Vel": 132
   },
   "Wpt-2": {
      "Lat": "34.852209",
      "Lon": "-117.987876",
      "Alt": 4500,
      "Ty": 5,
      "Scale-Lat": 6,
      "Scale-Lon": 6,
      "Scale-Alt": 4,
      "Tu": 1,
      "Vel": 132
   },
   "Pri-Wpt": {
      "Lat": "34.89528",
      "Lon": "-117.903598",
      "Alt": 2100,
      "Ty": 5,
      "Scale-Lat": 6,
      "Scale-Lon": 6,
      "Scale-Alt": 4,
      "Tu": 0,
      "Vel": 127
   },
   "Wpt-4": {
      "Lat": "34.904633",
      "Lon": "-117.885272",
      "Alt": 2100,
      "Ty": 2,
      "Scale-Lat": 6,
      "Scale-Lon": 6,
      "Scale-Alt": 4,
      "Tu": 0,
      "Vel": 6
   },
   "Details": {
      "187674": {
         "3344800": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 242,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 92,
                     "c4_wptNum": 584
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "188465": {
         "3361007": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 1966,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 95,
                     "c4_wptNum": 942
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "202129": {
         "3653337": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 504,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 202212,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 88,
                     "c4_wptNum": 547
                  },
                  "Hash": -1807252220
               }
            }
         ]
      },
      "210935": {
         "3843146": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 439,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 211032,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 105,
                     "c4_wptNum": 969
                  },
                  "Hash": -1807243400
               }
            }
         ]
      },
      "216948": {
         "3954104": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 276,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 104,
                     "c4_wptNum": 989
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "216980": {
         "3955100": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 2333,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 104,
                     "c4_wptNum": 989
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "222550": {
         "4080129": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 463,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 95,
                     "c4_wptNum": 942
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "223547": {
         "4106665": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 267,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 110,
                     "c4_wptNum": 2173
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "224012": {
         "4119553": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 221,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 107,
                     "c4_wptNum": 673
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "227030": {
         "4173956": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 567,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 211032,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 158,
                     "c4_wptNum": 998
                  },
                  "Hash": -1807243400
               }
            }
         ]
      },
      "261957": {
         "4779815": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 276,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 108,
                     "c4_wptNum": 989
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "265659": {
         "4857160": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 463,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 95,
                     "c4_wptNum": 942
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "265767": {
         "4860626": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 463,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 95,
                     "c4_wptNum": 942
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "267100": {
         "4897273": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 242,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 93,
                     "c4_wptNum": 584
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "272778": {
         "5014510": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 2333,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 272848,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 108,
                     "c4_wptNum": 989
                  },
                  "Hash": -1807181584
               }
            }
         ]
      },
      "274636": {
         "5052398": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 1966,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 272848,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 95,
                     "c4_wptNum": 942
                  },
                  "Hash": -1807181584
               }
            }
         ]
      },
      "281480": {
         "5207980": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 2902,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 93,
                     "c4_wptNum": 584
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "293448": {
         "5438565": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 2902,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 93,
                     "c4_wptNum": 584
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "307779": {
         "5712719": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 5299,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 123,
                     "c4_wptNum": 584
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "308328": {
         "5728003": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 5299,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 187761,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 123,
                     "c4_wptNum": 584
                  },
                  "Hash": -1807266671
               }
            }
         ]
      },
      "311708": {
         "5809765": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 276,
                  "Pri-Wpt-Indx": 21,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 311810,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 108,
                     "c4_wptNum": 989
                  },
                  "Hash": -1807142622
               }
            }
         ]
      },
      "311740": {
         "5810843": [
            {
               "Geo-Details": {
                  "Pri-Wpt": 2333,
                  "Pri-Wpt-Indx": 31,
                  "Validation-Status": "Validated",
                  "Geo-Res": 67,
                  "Taxi-Only-Route": false
               }
            },
            {
               "Ctg-Details": {
                  "Pri-Wpt": {
                     "c4_route": 311810,
                     "c4_indx": 1,
                     "c4_rwy": "Edw Rwy 04R (500ft)",
                     "c4_routeNum": 108,
                     "c4_wptNum": 989
                  },
                  "Hash": -1807142622
               }
            }
         ]
      }
   },
   "Hashed-String": "Wpt[lat=34.843213,lon=-118.005453,alt=NoReq,vel=NoReq,tu=NoReq,ty=4],Wpt[lat=34.852209,lon=-117.987876,alt=4500,vel=NoReq,tu=NoReq,ty=5],Wpt[lat=34.89528,lon=-117.903598,alt=2100,vel=NoReq,tu=0,ty=5],Wpt[lat=34.904633,lon=-117.885272,alt=NoReq,vel=6,tu=NoReq,ty=2],",
   "Hash": "0b464306360ee6b04199069824614b2f"
}

我想知道是否存在可以接收 JSON 对象并输出 HTML 的 Node.JS 模块或纯 Javascript 模块，这将允许 JSON 可点击（所以我可以深入了解关卡)，也许可以让我减少数据（注意细节级别的哈希是如何有很多冗余的。

至少，它是一个函数，我可以输入 JSON 对象（或字符串化的 JSON），输出将是支持它的正确 HTML 和 CSS。如果我能填写更多有助于减少数据的参数，那就更酷了。

我认为已经创建了类似的东西，但是我的 Google 搜索不够好，无法找到合适的！

【问题讨论】：

标签： javascript jquery html json node.js


【解决方案1】：

确实有。它被称为Dynatable。它是一个“HTML5+JSON 交互式表格插件”。对于刚刚发布的链接，我深表歉意，但它是您要求的第 3 方模块。

一旦我们有了 JSON 数据集，我们就可以执行我们所有的交互式和 使用 JavaScript 直接在 JSON 上进行动态逻辑。默认， dynatable 带有用于排序、过滤（也称为搜索）的功能， 和分页。 ...操作步骤的结果被渲染回来 到表体中的 DOM。

【讨论】：

  • 一个更具体的链接直接指向与问题相关的信息是dynatable.com/#existing-json
  • 感谢@IronFlare。我已经更新了链接。
  • 没问题。很高兴我能帮上忙。
  • 我搞砸了 dynatable，它看起来很有希望。我正在尝试向它提供确切的 JSON 对象，但它似乎不需要。我应该先清理 JSON 吗？
  • 嗯，dynatable 没有提供很多调试语句，但我认为我的 JSON 对象不起作用，因为它看起来不像数组？我不确定，但我的 JSON 的 obj.Details 部分是我希望可以轻松解析成表格的部分，但它没有做任何事情。
猜你喜欢
  • 2013-12-26
  • 2016-11-15
  • 2013-01-03
  • 2011-02-24
  • 1970-01-01
  • 2015-08-03
  • 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