为什么我的对象中的 jsonstring 未定义？

Question

我的 html 站点中有以下对象：

 <a id="myID" class="list-group-item" href="#"
    title="Cateblalbla." name="Innovation Potential"
    islist="false" type="MetaDataEnum"
    items="[{"id":"Business Innovation","title":"Business Innovation","value":"Business Innovation"},{"id":"Business Differentiation","title":"Business Differentiation","value":"Business Differentiation"},{"id":"Business Standard","title":"Business Standard","value":"Business Standard"}]" stencilsetbindings="[{"order":3,"stencil":"ProcessCollapsed"},{"order":3,"stencil":"BPMNDiagram","namespace":"http://b3mn.org/stencilset/bpmn2.0#"},{"order":5,"stencil":"Task","namespace":"http://b3mn.org/stencilset/bpmn2.0#"}]" glossarybindings="[{"category":"21f8b13544364137aa5e67312fc3fe19","order":5},{"category":"dde0a325cbe84368881a1709384cb37a","order":6}]">

当我这样做时：

console.log(document.id(myID).name)

结果是正确的。 但是当使用 .items 或 .glossaryBindings 时，我总是得到“未定义”，为什么会这样？我认为它是一个 jsonstring。

编辑： 我用javascript动态创建整个对象。 items 属性是用 JSON.stringify(itemArray) 创建的。所以我不知道如何假装，这会返回一个包含 " " 引号而不是 ' ' 的 jsonstring。

Answer 1

这里有两个问题：

1. 您在 "-quoted 属性中使用了 "。因此，属性的值自然会在其中的第一个 " 处停止。

2. 您使用的 HTML 属性无效。要使用您自己的任意属性，请使用data- 前缀：data-items="..."（以及data-stencilset 和data-type 和...）。

要修复 #1，您至少有两个选择：

• 请记住，HTML 中属性的内容是 HTML 文本。所以要在属性值中使用双引号，你可以使用"：

  data-json="{"foo&qout;:&qout;bar&qout;}"
  

  当然，您还必须记住 < 和 & 也必须是 < 和 &。 （但你必须记住无论如何，或者依赖浏览器的容忍度，如果它能够解决它就必须这样做。）

  当然，您可以在生成属性时自动执行该操作。在编写时进行替换很简单：& => &、< => < 和 " => "（同样，你应该做前两个无论如何，因为无论我们在这里做什么，属性文本都是 HTML）。

• 如果您的值从不包含'，您可以在属性值周围使用'，而不是"：

  data-json='{"foo":"bar"}'
  

实例：

var attr = document.getElementById("myID").getAttribute("data-items");
var data = JSON.parse(attr);
snippet.log("data[0].id = " + data[0].id);

<a id="myID" class="list-group-item" href="#" title="Cateblalbla." name="Innovation Potential" islist="false" type="MetaDataEnum"
data-items="[{&quot;id&quot;:&quot;Business Innovation&quot;,&quot;title&quot;:&quot;Business Innovation&quot;,&quot;value&quot;:&quot;Business Innovation&quot;},{&quot;id&quot;:&quot;Business Differentiation&quot;,&quot;title&quot;:&quot;Business Differentiation&quot;,&quot;value&quot;:&quot;Business Differentiation&quot;},{&quot;id&quot;:&quot;Business Standard&quot;,&quot;title&quot;:&quot;Business Standard&quot;,&quot;value&quot;:&quot;Business Standard&quot;}]">

  <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

因为items 不是<a> 元素的有效属性，所以您会变得未定义。您需要将其指定为数据属性，如下所示：

data-items="{json string here}"

在 Html5 中可以这样做：

console.log(document.id(myID).dataset.items);

如果您使用的是 jquery，可以这样做：

console.log($('#' + myID).data("items"));

注意：此答案假定您已解决 json/html 属性问题 (Best way to store JSON in an HTML attribute?)

第二点：根据@T.J.Crowder 的评论，虽然不是通过问题中使用的方式，但可以访问 items 属性。获取自定义属性的正确方法是：

document.getElementById(myID).getAttribute("items")