Json file display to html

Question

I'm trying to display a json local file to a html file. Found something on the google, but it really give me headache I got the following json file:

{
    "activities": [
        {
            "name": "C:\\Windows\\System32\\cmd.exe - python  autotimer.py",
            "time_entries": [
                {
                    "days": 0,
                    "end_time": "2020-04-14 17:14:12",
                    "hours": 0,
                    "minutes": 0,
                    "seconds": 4,
                    "start_time": "2020-04-14 17:14:08"
                },
            ]
        },

and the following html file. My problem with this html file is the part from the bottom, don't know if that is really good or not. I deteled te html part, cuz i doesn't let me post my question.

<script>
    $(document).ready(function (
        $.getJSON("activities.json", function (data) {
            var activities_data = '';
            $.each(data, function (key, value) {
                activities_data += '<tr>';
                activities_data += '<td>' + value.name + '</td>'
                activities_data += '<td>' + value.days + '</td>'
                activities_data += '<td>' + value.end_time + '</td>'
                activities_data += '<td>' + value.hours + '</td>'
                activities_data += '<td>' + value.minutes + '</td>'
                activities_data += '<td>' + value.seconds + '</td>'
                activities_data += '<td>' + value.start_time + '</td>'
                activities_data += '</tr>'
            });
            $('#activities_table').append(activities_data);
        });
));
</script>

What I'm doing wrong? I'm a newbie to all of this.

$.getJSON and similar AJAX commands will only work in a server environment; if you open the HTML file directly in the browser you're in the file:/// environment and it won't work. Get apache2 or some other web server solution and serve the files on localhost. — user5734311
– user5734311, Commented Apr 14, 2020 at 16:05
It looks like you want to access properties inside the "time_entries" key in your object. So, instead of value.days, you would use value.time_entries[0].days, value.time_entries[0].end_time, etc. Of course, this is assuming that you only care about the first item in time_entries . — Brian
– Brian, Commented Apr 14, 2020 at 16:05
Instead of $.each(data, you need to iterate through $.each(data.activities,. Then, you can append value.name, value.time_entries[0].days, value.time_entries[0].end_time as td elements. — Brian
– Brian, Commented Apr 14, 2020 at 18:05
Tried everything you said, but nothing... changed instead of $.each(data, using $.each(data.activities, .. I really don't know, is there a place where i can put the entire code for you? Maybe i'm skiping something important in header, or maybe everything that is in my code is wrong. — Ovidiu2k4
– Ovidiu2k4, Commented Apr 15, 2020 at 12:13

arslan · Accepted Answer · 2020-04-14 16:12:52Z

2

if this local file then first save this file with filename.json file type then import or require that file like import * as data from filename.json then use it with data.default.activities[0].name. or if this is global mean coming from somewhere else then parse that data first it will return object then use

answered Apr 14, 2020 at 16:12

arslan

1,14212 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Json file display to html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related