爲什麼我的對象中的jsonstring未定義？

-1

我有以下對象在我的HTML的網站：爲什麼我的對象中的jsonstring未定義？

<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這樣做時，我總是會得到「undefined」，爲什麼會出現這種情況？我認爲它是一個jsonstring。

編輯： 我用javascript動態創建整個對象。 items屬性使用JSON.stringify（itemArray）進行創建。所以我不知道如何假裝，這返回給我一個包含「」引號而不是「」的jsonstring。

來源

2015-09-10 progNewbie

這不是有效的HTML。除了使用非標準屬性之外，您正嘗試在用字面引號字符分隔的屬性值內使用字面引號字符。 – Quentin

你想完成什麼？ – brso05

@Quentin：你有沒有建議如何將jsonstring存儲在一個非標準的屬性中，而不會產生這個'quote'錯誤？ – progNewbie

有兩個問題在這裏：一個" -quoted屬性中

您使用"。所以自然，該屬性的值在其中的第一個"停止。
您正在使用無效的HTML屬性。要使用您自己的任意屬性，請使用data-前綴：data-items="..."（和data-stencilset和data-type和...）。

要解決＃1，您至少有兩種選擇：

請記住，在HTML屬性的內容HTML文本。因此，要屬性值內使用雙引號，你可以使用"：
```
data-json="{&quot;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>

來源

2015-09-10 13:14:18

請參閱我的編輯：我不確定如何執行第二種方法，因爲動態創建屬性 – progNewbie

@texNewbie：使用什麼語言填充屬性值？這是寫時，它做了更換一個簡單的問題：'＆'=>'&'，'<' =>'<'和'「'=>'"'（並再次，你應該做的頭兩個反正）。 –

@texNewbie：如果你真的寫出了HTML文本（例如，當生成HTML響應服務器端時），你只需要這樣做。 –

-1

由於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")

來源

2015-09-10 13:04:40

添加*並還適當地編碼引號* – Vallentin

這就是不是爲什麼OP會遇到問題，雖然沒有效果，但不是一個好主意，非''data' *'任意屬性都可以工作*。引用是真正的問題 –

@TJCrowder：看起來很像像製作的答案。你應該這樣發佈。 –

爲什麼我的對象中的jsonstring未定義？

回答

相關問題