Razor Page & jQuery 中位置 1 处的 JSON 中的意外标记 o

Question

I have a JSON object as below and I need to pass some of the object via a jQuery Attribute tag. I am getting a JSON parse error but I am not sure why.

  "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"}
        ]
      }
      ]

In my razor page I am serialising the section of the JSON object I need.

@foreach (var people in myjson) {

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

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

}

In 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>)

If I don't use JSON.Parse and just try and loop through the object in JQuery I just end up with '0' and '1'

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

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

Result '0' and '1'.

Answer 1

I have a JSON object as below and I need to pass some of the object via a jQuery Attribute tag. I am getting a JSON parse error

If you use console.log(val); to output the val to console tab, you would find you have gotten a json array, like below.

when I try to use obj.Name I get 'undefined'

To extract data of owner and pets from that array, you can refer to the following code snippet.

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

That's because you're passing an array of object instead of an object so in your console you're getting something like this:

 [ { "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"} ] } ]

You can't parse an array like a object will be return a error.

You can also use devtools to see how the data is coming , maybe it is coming in another format, here is the docs for more info https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

The error is in the for bucle the correct syntax is:

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

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

here is the docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

Or you can use map: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

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

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