How to parse JSON and use its values in DOM?

E

Eugene2018-08-15 02:09:01

JavaScript

Eugene, 2018-08-15 02:09:01

We have JSON:

newdate = {
            2018:{
                7:[1, 2],
                8:[10,15,21]
            },
            2019:{
                1:[2,3],
                11:[4]
            }
        };

We have a table (this is a calendar, in this case it is July 2018):

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table id="calendar" border="0" cellspacing="0" cellpadding="1">
    <thead>
    <tr>
        <td><b>‹</b>
        </td>
        <td colspan="5" data-month="7" data-year="2018">Август 2018</td>
        <td><b>›</b>
        </td>
    </tr>
    <tr>
        <td>Пн</td>
        <td>Вт</td>
        <td>Ср</td>
        <td>Чт</td>
        <td>Пт</td>
        <td>Сб</td>
        <td>Вс</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td class="today">15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
    </tr>
    <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
    </tr>
    <tr>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td>31</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </tbody>
</table>

How to add a class ("newclass") to all elements that contain a date from JSON.
In this case, the "newclass" class should be added to the elements containing July 1st and July 2nd.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Eugene, 2018-08-16
@prukon

Decision:

$("#calendar td").each(function () {
            if (parseInt($(this).text())) {
                let yearMonth = sheduleDate[$('#calendar td[data-year]').attr('data-year')][$('#calendar td[data-month]').attr('data-month')];
                // console.log(yearMonth)
                if (yearMonth) {
                    if (yearMonth.indexOf(parseInt($(this).text())) !== -1) {
                        $(this).addClass('scheduleday')
                        console.log(yearMonth)
                    }
                }
            }
        })

A

Andrey, 2018-08-15
@VladimirAndreev

td, assign some attribute of the year-month-day type, go through the json cycle, collect a set of attributes, put down a class for them.