Pass JSArray from HTML to Javascript

Question

I have a scala file that creates the following JsArray and returns it to my Play Framework's 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"
    }
]

I forward it to my HTML document in Scala Play Framework. I send it with the following command:

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

Following is my HTML code from where I wish to pass the jsArray to my java script file:

@(implicit 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" [email protected]("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" [email protected]("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>

How do I pass the json object instead to the d3.js file? I use a foreign object like array and string into my HTML file directly by defining say for example:

@(implicit str: String ,assetsFinder: AssetsFinder)

and using it into my HTML file like:

<div class="photo_container">
<img [email protected]("images/a.png") height="35px" width="52px" align="middle"/>
<h5>@str</h5>
</div>

I need html to passing the variable to my d3.js. I assume I will catch it in my d3.js with the following code in my d3.js:

var jsonFile = // catch the variable here

Currently, the code in my d3.js is like this, where it is picking up a hardcoded Json file:

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

Please help me.

Mohsen Taleb · Accepted Answer · 2018-07-11 17:27:05Z

1

You can simply store your data as a data-* attribute on any HTML element like: <div id="temp" data-json="[{"id": "DY173"}, {"id": "QO462"}]"> and then access it with d3 or 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>

answered Jul 11, 2018 at 17:27

Mohsen Taleb

1,1271 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aakanksha Choudhary Over a year ago

Oh perfect! Thanks!!

Mohsen Taleb Over a year ago

@AakankshaChoudhary No problem, if you think your question is answered, please mark it as accepted.

Aakanksha Choudhary Over a year ago

Thanks @Mohsen! I have a followup question, how do I pass a json variable instead of raw json data thro the div?

Mohsen Taleb Over a year ago

@AakankshaChoudhary In javascript you can not do that natively, but some libraries like jQuery handle it by their own way: api.jquery.com/jquery.data Another workaround is that you store your data in a global variable in your HTML file, like <script>window.data = {}</script> and then access it in d3.

Aakanksha Choudhary Over a year ago

Oh I get it now @MohsenTalen

Collectives™ on Stack Overflow

Pass JSArray from HTML to Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related