从JSON属性中删除双引号

I am trying to create an interactive tour using hopscotch.js. The standard data structure that the JavaScript library requires the tour to be in to work is as follows:

我正在尝试使用hopscotch.js创建一个交互式游览。 JavaScript库要求巡视工作的标准数据结构如下:

// Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

Putting the tour steps directly into a JavaScript library works perfectly well but ideally I want to be able to hold all these details in a database and use AJAX to pass the data through to hopscotch.js. (This is so tours can be created dynamically and the content can be changed without a code release).

将巡回步骤直接放入JavaScript库中可以很好地工作,但理想情况下我希望能够将所有这些细节保存在数据库中并使用AJAX将数据传递给hopscotch.js。 (这样可以动态创建游览,无需代码发布即可更改内容)。

Everything is working fine apart from when my target is using the document.querySelector() element selector.

除了我的目标使用document.querySelector()元素选择器之外,一切正常。

My basic C# Model for each tour step is as follows:

我每个巡回步骤的基本C#模型如下:

public class MockTourSteps
{
    public string Title { get; set; }
    public string Content { get; set; }
    public string Target { get; set; }
    public string Placement { get; set; }
}

As Target is a string, I have to pass the value in double-quotes.

由于Target是一个字符串,我必须用双引号传递该值。

The problem with this is that when it is serialized to JSON, the following error is being kicked-out when viewing the page with Chrome Developer Tools:

这样做的问题是,当它被序列化为JSON时,使用Chrome开发者工具查看页面时会出现以下错误:

Syntax error, unrecognized expression: document.querySelector(".btn-primary")

语法错误,无法识别的表达式:document.querySelector(“。btn-primary”)

Exploring the JSON data that has been returned to the page, I can see that the double-quotes around my document.querySelector() are causing the problem.

探索已返回到页面的JSON数据,我可以看到我的document.querySelector()周围的双引号导致了问题。

I need these double quotes to be removed from my target when I am specifying the target via document.querySelector() but the double-quotes are to remain when I am specifying a target based on a HTML tag such as header.

当我通过document.querySelector()指定目标时,我需要从目标中删除这些双引号,但是当我基于HTML标记(如标题)指定目标时,将保留双引号。

Any ideas how I can achieve this?

我有什么想法可以达到这个目的吗?

1 个解决方案

#1

The main problem that in provided example you are using javascript object but you will get JSON from your server. You will need to use some kind of JSON processing at client side.

在提供示例中您使用javascript对象但您将从服务器获取JSON的主要问题。您需要在客户端使用某种JSON处理。

I think you can add more info in your model:

我想你可以在模型中添加更多信息:

public class MockTourStep
{
    public string Title { get; set; }
    public string Content { get; set; }
    public TargetC Target { get; set; }
    public string Placement { get; set; }

    public enum TargetType
    {
        ElementName,
        QuerySelector
    }

    public class TargetC
    {
        [JsonConverter(typeof(StringEnumConverter))]
        public TargetType Type { get; set; }

        public string Value { get; set; } 
    }
}

And sample response:

样品回复:

var tour = new
{
    Id = "hello-hopscotch",
    Steps = new List<MockTourStep>
    {
        new MockTourStep
        {
            Title = "My Header",
            Content = "This is the header of my page.",
            Target = new MockTourStep.TargetC
            {
                Type = MockTourStep.TargetType.ElementName,
                Value = "header"
            },
            Placement = "bottom"
        },
        new MockTourStep
        {
            Title = "My content",
            Content = "Here is where I put my content.",
            Target = new MockTourStep.TargetC
            {
                Type = MockTourStep.TargetType.QuerySelector,
                Value = "document.querySelector('#content p')"
            },
            Placement = "bottom"
        }
    }
};

Then, at client side you can check target type and set it to be a valid value:

然后,在客户端,您可以检查目标类型并将其设置为有效值:

$.getJSON("url", function (tour) {
    for (var i = 0; i < tour.steps.length; i++) {
        var step = tour.steps[i];

        switch (step.target.type) {
            case "ElementName":
                step.target = step.target.value;
                break;
            case "QuerySelector":
                step.target = eval(step.target.value);
                break;
            default:
                throw Error;
        }
    }

    hopscotch.startTour(tour);
});

Please note eval use for QuerySelector. Using of eval is dangerous, so you need to check what you are serving to client.

请注意QuerySelector的eval使用。使用eval是危险的,因此您需要检查您为客户提供的服务。

#1