jquery, Putting Json in to html

Question

Hi i am trying to put a Json array in to Html below is what i have so far

Here is the actual JSON array

{
    "People": [{
        "Person1": {
            "Op": "5459",
            "Name": "Waheed Khan",
            "WorkHours": "5.0",
            "Start": "3:00PM",
            "End": "8:00PM",
            "Clock": "14:50:50",
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person2": {
            "Op": null,
            "Name": null,
            "WorkHours": null,
            "Start": null,
            "End": null,
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person3": {
            "Op": "5630",
            "Name": "Daniel Squires",
            "WorkHours": "8.75",
            "Start": "7:45AM",
            "End": "4:30PM",
            "Clock": "07:26:49",
            "OFF": "13:01:31",
            "ON": "13:48:08",
            "OUT": false
        }
    }, {
        "Person4": {
            "Op": "5617",
            "Name": "Harishkumar Mehta",
            "WorkHours": "8.5",
            "Start": "7:45AM",
            "End": "4:15PM",
            "Clock": "07:47:06",
            "OFF": "12:00:59",
            "ON": "12:29:54",
            "OUT": false
        }
    }, {
        "Person5": {
            "Op": "5596",
            "Name": "Robert Hickman",
            "WorkHours": "5.0",
            "Start": "7:45AM",
            "End": "2:45PM",
            "Clock": "07:46:43",
            "OFF": "12:01:10",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person6": {
            "Op": "1004",
            "Name": "Stuart Bottomley",
            "WorkHours": "8.4900000000000002",
            "Start": "8:00AM",
            "End": "4:30PM",
            "Clock": "07:59:12",
            "OFF": "14:22:00",
            "ON": "14:44:44",
            "OUT": "14:44:45"
        }
    }, {
        "Person7": {
            "Op": "1709",
            "Name": "Suzanne Neale",
            "WorkHours": "4.9900000000000002",
            "Start": "8:00AM",
            "End": "1:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person8": {
            "Op": "5500",
            "Name": "Christopher Lee",
            "WorkHours": "9.25",
            "Start": "7:45AM",
            "End": "5:00PM",
            "Clock": "07:43:14",
            "OFF": "11:43:55",
            "ON": "12:26:01",
            "OUT": false
        }
    }, {
        "Person9": {
            "Op": "5542",
            "Name": "Dawn Johnston",
            "WorkHours": "8.75",
            "Start": "7:45AM",
            "End": "4:30PM",
            "Clock": "07:29:53",
            "OFF": "13:01:02",
            "ON": "13:23:03",
            "OUT": false
        }
    }, {
        "Person10": {
            "Op": "1686",
            "Name": "Linval Williams",
            "WorkHours": "8.25",
            "Start": "9:45AM",
            "End": "6:00PM",
            "Clock": "10:13:37",
            "OFF": "13:10:34",
            "ON": "13:56:37",
            "OUT": false
        }
    }, {
        "Person11": {
            "Op": "5328",
            "Name": "Tracy Wren",
            "WorkHours": "3.9900000000000002",
            "Start": "9:00AM",
            "End": "1:00PM",
            "Clock": "07:54:20",
            "OFF": "11:58:18",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person12": {
            "Op": "5430",
            "Name": "Norman Davenport",
            "WorkHours": "8.4900000000000002",
            "Start": "8:00AM",
            "End": "4:30PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person13": {
            "Op": "1799",
            "Name": "Lindsey Crawshaw",
            "WorkHours": "6.0",
            "Start": "9:00AM",
            "End": "3:00PM",
            "Clock": "07:24:17",
            "OFF": "13:26:24",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person14": {
            "Op": "5304",
            "Name": "Stuart Benson",
            "WorkHours": "9.5",
            "Start": "7:30AM",
            "End": "5:00PM",
            "Clock": "07:17:10",
            "OFF": "13:02:12",
            "ON": "13:30:24",
            "OUT": false
        }
    }, {
        "Person15": {
            "Op": "1769",
            "Name": "Steven Prince",
            "WorkHours": "8.75",
            "Start": "7:45AM",
            "End": "4:30PM",
            "Clock": "07:29:59",
            "OFF": "11:58:22",
            "ON": "12:26:40",
            "OUT": false
        }
    }, {
        "Person16": {
            "Op": "1715",
            "Name": "Claire Boddy",
            "WorkHours": "3.9900000000000002",
            "Start": "9:00AM",
            "End": "1:00PM",
            "Clock": "07:54:20",
            "OFF": "11:58:26",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person17": {
            "Op": "5307",
            "Name": "Sonya Beddington",
            "WorkHours": "3.9900000000000002",
            "Start": "9:00AM",
            "End": "1:00PM",
            "Clock": "12:46:34",
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person18": {
            "Op": "1877",
            "Name": "Kathryn Dandy",
            "WorkHours": "8.5",
            "Start": "8:30AM",
            "End": "5:00PM",
            "Clock": "08:24:26",
            "OFF": "13:11:27",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person19": {
            "Op": "1187",
            "Name": "Kathleen Isherwood",
            "WorkHours": "6.0",
            "Start": "7:30AM",
            "End": "1:30PM",
            "Clock": "07:22:01",
            "OFF": "14:06:43",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person20": {
            "Op": null,
            "Name": null,
            "WorkHours": null,
            "Start": null,
            "End": null,
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person21": {
            "Op": "5580",
            "Name": "Muhammad Khan",
            "WorkHours": "7.5",
            "Start": "7:45AM",
            "End": "3:15PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person22": {
            "Op": "5579",
            "Name": "Salee Berry",
            "WorkHours": "6.0",
            "Start": "7:45AM",
            "End": "1:45PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person23": {
            "Op": "5543",
            "Name": "Imtiaz Ahmed",
            "WorkHours": "9.0",
            "Start": "1:00AM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person24": {
            "Op": "1920",
            "Name": "Kay Mellor",
            "WorkHours": "8.0",
            "Start": "7:45AM",
            "End": "3:45PM",
            "Clock": "07:38:13",
            "OFF": "12:01:06",
            "ON": "12:30:43",
            "OUT": false
        }
    }, {
        "Person25": {
            "Op": "5030",
            "Name": "Paul Edgar",
            "WorkHours": "8.75",
            "Start": "8:15AM",
            "End": "5:00PM",
            "Clock": "07:43:36",
            "OFF": "12:14:02",
            "ON": "12:42:42",
            "OUT": false
        }
    }, {
        "Person26": {
            "Op": "5475",
            "Name": "Raja Khan",
            "WorkHours": "7.75",
            "Start": "7:45AM",
            "End": "3:30PM",
            "Clock": "07:42:26",
            "OFF": "13:28:02",
            "ON": "13:55:58",
            "OUT": false
        }
    }, {
        "Person27": {
            "Op": "1377",
            "Name": "James Blain",
            "WorkHours": "9.25",
            "Start": "7:45AM",
            "End": "5:00PM",
            "Clock": "07:43:30",
            "OFF": "12:01:12",
            "ON": "12:55:00",
            "OUT": false
        }
    }, {
        "Person28": {
            "Op": "5655",
            "Name": "Carl Crompton",
            "WorkHours": "9.0",
            "Start": "1:00AM",
            "End": "8:00PM",
            "Clock": "10:52:01",
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person29": {
            "Op": "5673",
            "Name": "Julie Ann Barratt",
            "WorkHours": "5.0",
            "Start": "9:00AM",
            "End": "2:00PM",
            "Clock": "08:32:00",
            "OFF": "13:15:36",
            "ON": false,
            "OUT": false
        }
    }, {
        "Person30": {
            "Op": "5674",
            "Name": "Scott Carroll",
            "WorkHours": "9.25",
            "Start": "7:45AM",
            "End": "5:00PM",
            "Clock": "10:19:09",
            "OFF": "13:19:06",
            "ON": "14:02:19",
            "OUT": false
        }
    }, {
        "Person31": {
            "Op": "5681",
            "Name": "Marta Kurek",
            "WorkHours": "4.25",
            "Start": "3:45PM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person32": {
            "Op": "5693",
            "Name": "Summer Whittaker",
            "WorkHours": "8.75",
            "Start": "7:45AM",
            "End": "4:30PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person33": {
            "Op": "5709",
            "Name": "Abigale Bennett",
            "WorkHours": "5.0",
            "Start": "3:00PM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person34": {
            "Op": "5713",
            "Name": "Karren Howarth",
            "WorkHours": "9.0",
            "Start": "8:00AM",
            "End": "5:00PM",
            "Clock": "07:32:14",
            "OFF": "12:01:02",
            "ON": "12:30:32",
            "OUT": false
        }
    }, {
        "Person35": {
            "Op": null,
            "Name": null,
            "WorkHours": null,
            "Start": null,
            "End": null,
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person36": {
            "Op": "5714",
            "Name": "Darren Haslam",
            "WorkHours": "9.25",
            "Start": "7:45AM",
            "End": "5:00PM",
            "Clock": "07:42:18",
            "OFF": "13:00:30",
            "ON": "13:31:57",
            "OUT": false
        }
    }, {
        "Person37": {
            "Op": "5721",
            "Name": "Dayle Pickup",
            "WorkHours": "3.25",
            "Start": "4:45PM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }, {
        "Person38": {
            "Op": "5722",
            "Name": "Dave Gilmore",
            "WorkHours": "3.0",
            "Start": "5:00PM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }]
}

Here is the Js/jQuery i have so which is taken from elsewhere and adapted

$.getJSON("People.json",
    function(data){
      $.each(data.People, function(i,Person){
        content = '<p>' + Person.Op+ '</p>';
        content += '<p>' + Person.Name + '</p>';
        content += '<br/>';
        $(content).appendTo("#posts");
        console.log(Person);
      });
    });

currently this just spits out "undefined"

Here is a screenshop of the the chrome console in case that helps

https://i.sstatic.net/PEpFw.jpg

I may just be overlooking something stupid but i cant see to get it to work correctly any help would be appropriated

You have person1, person2 in your json. Is that how it should be? — TJ-
– TJ-, Commented Aug 11, 2014 at 14:31
Person.Op is undefined. Look at your JSON structure. The values are in Person.Person1.Op, Person.Person2.Op, etc. depending on which array element you're looking at. — David
– David, Commented Aug 11, 2014 at 14:35
@MelanciaUK, Strictly speaking, JSON is not an object either, it is a string that represents a to-be-deserialized object. — haim770
– haim770, Commented Aug 11, 2014 at 14:36

Mritunjay · Accepted Answer · 2014-08-11 14:35:36Z

1

Problem is when you are getting Person in your each callback that has value like bellow

{"Person1":{"Op":"5459","Name":"Waheed Khan",.....}};

So you can not call just Person.Op & Person.Name You have to say Person.Person1.Op & Person.Person1.Name.

This will work here

Write your each implementation like bellow

$.each(data.People, function(i,PersonObj){
        var Person = PersonObj[Object.keys(PersonObj)[0]]
        content = '<p>' + Person.Op + '</p>';
        content += '<p>' + Person.Name + '</p>';
        content += '<br/>';
        $(content).appendTo("#posts");
        console.log(Person);
      });

I think there must be better solutions also.

SAMPLE DEMO

answered Aug 11, 2014 at 14:35

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oisian2 Over a year ago

Thank you very much i didn't even think about that totally overlooked it thanks again

Oisian2 Over a year ago

on a side note i have changed it from <p> to <td> to put it all in a table but it's all on one line so what would be the best way to have each person on a new line in a table

Ashley Medway · Accepted Answer · 2014-08-11 14:43:14Z

0

$.each(data.People, function(i,Person){
    $.each(Person, function (x, y) {
        content = '<p>' + Person[x].Op+ '</p>';
        content += '<p>' + Person[x].Name + '</p>';
        content += '<br/>';
        $(content).appendTo("#posts");
        console.log(x);
    });
});

JsFiddle

answered Aug 11, 2014 at 14:43

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

Collectives™ on Stack Overflow

jquery, Putting Json in to html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related