Razor Page & jQuery 中位置 1 處的 JSON 中的意外標記 o

Question

我有一個 JSON 對象，如下所示，我需要通過 jQuery 屬性標簽傳遞一些對象。 我收到一個 JSON 解析錯誤，但我不知道為什么。

  "Walkers" : "true",
  "Owners" :[
  {
        "Name":"Bob",
        "Description":"Old",
        "Pets": [
          {"Name" : "Cuddles", "Age": "8"}, 
          {"Name" : "Pounce", "Age": "3"}
        ]
      },
      {
        "Name":"Mary",
        "Description":"Older",
        "Pets": [
          {"Name" : "Red", "Age": "13"}, 
          {"Name" : "Leaf", "Age": "1"}
        ]
      }
      ]

在我的剃刀頁面中，我正在序列化我需要的 JSON 對象部分。

@foreach (var people in myjson) {

<p>@people.Walkers</p> //true

<div id="mytarget" data-owners='@Json.Serialize(people.Owners)'> </div>

}

在 jQuery 中：

var val = $("#mytarget").data('owners');

            console.log("json " + val); // result: json [object Object],[object Object]

            console.log("parsed " + JSON.parse(val)); // result: VM7:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)

如果我不使用 JSON.Parse 而只是嘗試遍歷 JQuery 中的對象，我只會得到“0”和“1”

var val = $("#mytarget").data('owners');

for (var obj in val) {
   Console.log(obj);
}

Result '0' and '1'.

Answer 1

我有一個 JSON 對象，如下所示，我需要通過 jQuery 屬性標簽傳遞一些對象。 我收到 JSON 解析錯誤

如果你使用console.log(val); 要將val輸出到控制台選項卡，您會發現您獲得了一個 json 數組，如下所示。

當我嘗試使用 obj.Name 時，我得到“未定義”

要從該數組中提取所有者和寵物的數據，您可以參考以下代碼片段。

var val = $("#mytarget").data('owners');

//console.log("json " + val);

console.log(val);


$.each(val, function (index, owner) {
    //owner object
    console.log("Name: "+owner.name+"; Description: "+owner.description);

    //pets of current owner
    $.each(owner.pets, function (index, pet) {
            console.log("Name: "+pet.name+"; Age: "+pet.age);
    })
})  

Answer 2

那是因為你傳遞的是一個對象數組而不是一個對象，所以在你的控制台中你會得到這樣的東西：

 [ { "Name":"Bob", "Description":"Old", "Pets": [ {"Name" : "Cuddles", "Age": "8"}, {"Name" : "Pounce", "Age": "3"} ] }, { "Name":"Mary", "Description":"Older", "Pets": [ {"Name" : "Red", "Age": "13"}, {"Name" : "Leaf", "Age": "1"} ] } ]

你不能像一個對象那樣解析一個數組會返回一個錯誤。

您還可以使用devtools 查看數據的來源，也許它是另一種格式，這里是更多信息的文檔https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

錯誤在 for bucle 中，正確的語法是：

var val = $("#mytarget").data('owners');

for (i = 0; i < val.length; i++) {
   console.log(val[i])
}

這是文檔： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

或者你可以使用地圖： https : //developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

var val = $("#mytarget").data('owners');

val.map(item => {
  console.log(item)
})