将 JSArray 从 HTML 传递到 Javascript答案

【问题标题】：Pass JSArray from HTML to Javascript将 JSArray 从 HTML 传递到 Javascript
【发布时间】：2018-07-10 13:34:52
【问题描述】：

我有一个 scala 文件，它创建以下 JsArray 并将其返回到我的 Play Framework 的 HomeController：

[
    {
        "id": "DY173",
        "name": "Harry Potter and the Philosopher's Stone",
        "summary": ".....",
        "author": "J.K.Rowling"
    },{
        "id": "QO462",
        "name": "The Tale of Peter Rabbit",
        "summary": ".....",
        "author": "Beatrix Potter"
    }
]

我将它转发到我在 Scala Play Framework 中的 HTML 文档。我使用以下命令发送它：

val jsonArrayBooks: JsArray = ScalaClassName.returnMethod()
Ok(views.html.index(assetsFinder, jsonArrayBooks))

以下是我希望将 jsArray 传递给我的 java 脚本文件的 HTML 代码：

@(隐式 assetsFinder: AssetsFinder, jsonArrayBooks: JsArray)

<html lang="en">

<title>Some Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" media="screen" href=@routes.Assets.versioned("stylesheets/main.css")>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">
<link rel="stylesheet" type="text/css" media="screen" href=@routes.Assets.versioned("stylesheets/style.css")>

<body bgcolor="#333333">
    <div class = "header" style="height: auto"><script src='@routes.Assets.versioned("javascripts/d3.v3.min.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("javascripts/d3.js")'></script>
    </div>
</body>
</html>

如何将 json 对象传递给 d3.js 文件？我通过定义例如直接在我的 HTML 文件中使用像数组和字符串这样的外来对象：

@(implicit str: String ,assetsFinder: AssetsFinder)

并将其用于我的 HTML 文件中，例如：

<div class="photo_container">
<img src=@assetsFinder.path("images/a.png") height="35px" width="52px" align="middle"/>
<h5>@str</h5>
</div>

我需要 html 来将变量传递给我的 d3.js。我假设我会在我的 d3.js 中使用以下代码在我的 d3.js 中捕获它：

var jsonFile = // catch the variable here

目前，我的 d3.js 中的代码是这样的，它正在获取一个硬编码的 Json 文件：

   d3.json("/assets/javascripts/graph.json", function(error, json) {
        if (error) throw error;

请帮帮我。

【问题讨论】：

标签： javascript html d3.js playframework

【解决方案1】：

您可以简单地将数据存储为任何 HTML 元素上的 data-* 属性，例如： <div id="temp" data-json="[{"id": "DY173"}, {"id": "QO462"}]"> 然后用 d3 或 javascript 访问它：

var data = d3.select('#temp').attr('data-json');
var dataObj = JSON.parse(data)
console.log(dataObj);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  <div id='temp' data-json='{"data":[{"id":"DY173"},{"id":"QO462"}]}'></div>
</body>

</html>

【讨论】：

哦，完美！谢谢！！
@AakankshaChoudhary 没问题，如果您认为您的问题已得到解答，请将其标记为已接受。
谢谢@Mohsen！我有一个后续问题，如何通过 div 传递 json 变量而不是原始 json 数据？
@AakankshaChoudhary 在 javascript 中，您不能在本地执行此操作，但一些库（如 jQuery）以自己的方式处理它：api.jquery.com/jquery.data 另一个解决方法是将数据存储在 HTML 文件中的全局变量中，比如<script>window.data = {}</script>，然后在d3中访问它。
哦，我现在明白了@MohsenTalen