C#から受け取ったJson文字列がparseできない

Question

こんばんは、
.NET FormアプリケーションのWebBrowserコントロールを利用してLeafletを表示させるものを作成しています。
予め入っている緯度経度などの情報が入った配列データを基にマップに経路を表示させる処理を作りたいと思っています。

C#側で作成したJson文字列をWebBrowserコントロールの「WebBrowser.Document.InvokeScript」で引数として渡して処理を実行しようとしたところ、Script側で受け取ることはできたのですが、JSON.parseができなくて困っています。
有識者の方、教えていただければ幸いです。

public string ConvertSerial()
        {
            var cnt = 0;
            string jsonStr = "" + '[';
            foreach(var data in SpanDataList_Day1)
            {
                JsonConv js = new JsonConv()
                {
                    Time = data[1],
                    Route = new List<double>
                    {
                        // 緯度
                        double.Parse(data[2]),
                        // 経度
                        double.Parse(data[3])
                    }
                };
                jsonStr += JsonConvert.SerializeObject(js, Newtonsoft.Json.Formatting.Indented);
                if (cnt + 1 != SpanDataList_Day1.Count) jsonStr += ',';
                cnt++;
            }
            jsonStr += ']；';
            return jsonStr;
        }

jsonStr文字列の中身です
[{
                "Time": "16:25:00.00",
                "Route": [
                    37.532716,
                    140.711684
                ]
            }, {
                "Time": "16:25:00.60",
                "Route": [
                    37.532713,
                    140.711682
                ]
            }, {
                "Time": "16:25:1.20",
                "Route": [
                    37.53271,
                    140.711679
                ]
            }];

/// <summary>
    /// Json用格納クラス
    /// </summary>
    [JsonObject("SpanData")]
    class JsonConv
    {
        /// <summary>
        /// 時間
        /// </summary>
        [JsonProperty("Time")]
        public string Time;
        /// <summary>
        /// 経路
        /// </summary>
        [JsonProperty("Route")]
        public List<double> Route;
    }

JSへの引き渡し

webBrowser1.Document.InvokeScript("PastRoute", new string[] {prbm.ConvertSerial()});

<script type="text/javascript">
function PastRoute(data) {
   var js = JSON.parse(data);
   alert(js);
}
</script>

開発環境
VisualStudio 2017
NewtonSoft.Json 12.0.3

Comments

[退会済みユーザー]

質問者さん、無言になってしまったけど、回答したのでそれに対するフィードバックを書こう。役に立った、立たなかったぐらいは書けるのでは？　役に立たなかったのなら、どこが期待する回答と違ったのか書けばあなたの期待する回答が出てくるかも。

[Izumo_Asa]

すみません、五日間ほど入院しておりました。返事が遅れてしまいました。申し訳ございません。
先ほど家に着き確認してみたところセミコロンが余計でした。

[退会済みユーザー]

> セミコロンが余計でした

JSON 文字列を生成する C# のコードでは最後のセミコロンはつかないので、JSON の文字列を書くときの転記ミスだろうと思ってましたが違うのですか？

Answer 1

JSONの末尾のセミコロンが余計です。

Comments

[Izumo_Asa]

返事が大変遅れてしまい、申し訳ございません。
原因はセミコロンが余計でした。ありがとうございました！！！

Answer 2

AT_2nd さんが指摘された ; が余計というところは直してもらうとして、以下のようにすれば C# から JavaScript に JSON 文字列渡すことができて、JSON.parse で期待通り JavaScript オブジェクトにパースできるはずです。

注追記： デフォルトでは IE7 相当の動作となるので JSON が定義されてないというスクリプトエラーになるかもしれません。その場合はレジストリの設定で JSON オブジェクトが使えるバージョン以上に設定してください。

WebBrowser コントロールのInternet Explorerを最新のバージョンに変更する
https://www.ipentec.com/document/csharp-change-webbrower-control-internet-explorer-version

WebBrowser アプリ

using System;
using System.Windows.Forms;

namespace WebBrowser
{
    public partial class Form1 : Form
    {
        private string url = "http://websiteproject.com/0090webbrowsertest.aspx";


        public Form1()
        {
            InitializeComponent();
            this.textBox1.Text = this.url;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            this.webBrowser1.Navigate(this.textBox1.Text);
        }

        private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            HtmlDocument document = this.webBrowser1.Document;

            string json = "[{\"Time\": \"16:25:00.00\",\"Route\": [37.532716,140.711684]}]";
            document.InvokeScript("PastRoute", new object[] { json });
        }
    }
}

0090webbrowsertest.aspx（上のコードの要求先）

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="0090WebBrowserTest.aspx.cs" 
    Inherits="_0090WebBrowserTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        //<![CDATA[
        function PastRoute(data) {
            var js = JSON.parse(data);
            alert("Time: " + js[0].Time + " Route: " + js[0].Route[0] + ", " + js[0].Route[1]);
        }
        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>0090WebBrowserTest.aspx</h1>
        <input id="button4" type="button" value="button" />
    </form>
</body>
</html>

上の WebBrowser の実行結果

Comments

[Izumo_Asa]

急遽入院により返事が大変遅れてしまいました、大変申し訳ございません。
先ほど帰ってきて確認したところ原因はセミコロンのようで改善することができました。
まだJSONの部分がしっかり理解できていないため、参考にさせていただきます。
ありがとうございました。

[退会済みユーザー]

> 先ほど帰ってきて確認したところ原因はセミコロンのようで

違うのでは？ JSON 文字列を生成する C# のコードではセミコロンはつかないです。原因は InvokeScript メソッドへの JSON 文字列の渡し方と JavaScript でパースした後に alert に直接オブジェクトを渡しているところです。

[Izumo_Asa]

今気づきました。「jsonStr += ']';」の部分が、僕の悩んでた当時のコードのほうでは「jsonStr += ']；';」になっており、普通に貼る際に何らかのことをして質問文のほうのセミコロンを消してしまったみたいでした。デバッグしたときJson文字列をそのまま貼ったものなので恐らくそうだと思われます。
混乱させるようなことをしてしまい、申し訳ございません。
ここへたどり着いた方が混乱しないためにも質問のほうも悩んでいた当時のものに修正しておきます。

[退会済みユーザー]

でも、InvokeScript("PastRoute", new string[] {prbm.ConvertSerial()})　ではダメだと思うのですが、それで問題なかったですか？　また、alert(js) で JSON 文字列を期待通り取得できて表示できるとは思えないの得dすけど？