Parse JSON File by Arrays as Input to Java Script (JS / JavaScript) Function)

support
1

Hello,

I have a json file with the following content:

{
    "data":[
        {
            "mode":"lines",
            "type":"scatter",
            "x":[
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                10
            ],
            "y":[
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                10
            ],
            "xaxis":"x1",
            "yaxis":"y1",
            "visible":true,
            "showlegend":true
        }
    ],
    "layout":{
        "title":"Hello",
        "margin":{
            "b":0,
            "l":0,
            "r":0,
            "t":80,
            "pad":0
        },
        "xaxis1":{
            "side":"bottom",
            "type":"linear",
            "anchor":"y1",
            "domain":[
                0.13,
                0.905
            ]
        },
        "yaxis1":{
            "side":"left",
            "type":"linear",
            "anchor":"x1",
            "domain":[
                0.11,
                0.925
            ]
        },
        "showlegend":false,
        "annotations":[
            
        ]
    }
}

The file is available in my data folder at the name plotlyJson.json.
I want to use the objects of this JSON File as input to the function Plotly.newPlot().

So basically I need a pure string of the data and layout objects.

In my shortcode I do:

{{ $fileData := $.Scratch.Get "fileData" }}

{{ $plotlyData := $fileData.data }}
{{ $plotlyLayout := $fileData.layout }}

Then in the JavaScript code of the shortcode I do:

Plotly.newPlot(gd, '{{$plotlyData}}', '{{$plotlyLayout}}');

Where gd is the element id of the div.

The problem is the actual string the JavaScript function gets is something like:

Plotly.plot(gd, '[map[mode:lines showlegend:true type:scatter visible:true x:[1 2 3 4 5 6 7 8 9 10] xaxis:x1 y:[1 2 3 4 5 6 7 8 9 10] yaxis:y1]]', 'map[annotations:[] margin:map[b:0 l:0 pad:0 r:0 t:80] showlegend:false title:Hello xaxis1:map[anchor:y1 domain:[0.13 0.905] side:bottom type:linear] yaxis1:map[anchor:x1 domain:[0.11 0.925] side:left type:linear]]');

Where does the map coming from?
How can I send the function to correct string of the JSON object?

2

Map is a term in Golang for “arrays” and “objects”. You are “var_dumping” a variable of your array, not “echoing” or “printing”. (everything in “” is PHP terminology)

I am pretty sure delimit is what you want to look at:

3

If I get delimit() right it won’t work. As the JSON string contains more than just an array.
Is there another option?

4

Have a look at jsonify: jsonify | Hugo

{{ $yourmap | jsonify }}
1 Like
5

It was the first I tried, but it didn’t work.
Are there any special options I should use?

6

Do you have your code in a repo somewhere we can reproduce? That would make it easier to help you.

As a quick example:

<pre>
{{ .Params }}

{{ .Params | jsonify }}

{{ .Params | jsonify (dict "indent" "  ") }}
</pre>

map[draft:false foo:map[bar:baz] iscjklanguage:false tags:[one two three] title:This is my homepage]

{"draft":false,"foo":{"bar":"baz"},"iscjklanguage":false,"tags":["one","two","three"],"title":"This is my homepage"}

{
  "draft": false,
  "foo": {
    "bar": "baz"
  },
  "iscjklanguage": false,
  "tags": [
    "one",
    "two",
    "three"
  ],
  "title": "This is my homepage"
}
1 Like