我有一个 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 文件？ 我通过定义 say 直接在我的 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;
请帮帮我。
最佳答案
您可以简单地将数据存储为 data-*任何 HTML 元素上的属性，例如:
<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>关于javascript - 将 JSArray 从 HTML 传递到 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51266708/