Почему данные API не хотят показываться на странице индекса?

Question

Как подключить API к моему сайту, я пытаюсь сделать это, но это не работает.

$.getJSON("https://www.scorebat.com/video-api/v1/",function(data){
console.log(data);
var title = data.side1[0].name;
$(".title").append(title);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="script.js"></script>

<p class="title"></p>

Answer 1

я думаю, что это должно быть

data[0].side1.name

, поскольку данные

[
    {
        "title": "AC Milan - Frosinone",
        "embed": "<iframe src='https:\/\/www.scorebat.com\/emb...",
        "url": "https:\/\/www.scorebat.com\/ac-milan-vs-frosinone-live-stream\/",
        "thumbnail": "https:\/\/www.scorebat.com\/og\/m\/og760535.jpeg",
        "date": "2019-05-19T16:00:00+0000",
        "side1": {
            "name": "AC Milan",
            "url": "https:\/\/www.scorebat.com\/live-stream\/ac-milan\/"
        },
        "side2": {
            "name": "Frosinone",
            "url": "https:\/\/www.scorebat.com\/live-stream\/frosinone\/"
        },
        "competition": {
            "name": "ITALY: Serie A",
            "id": 13,
            "url": "https:\/\/www.scorebat.com\/italy-serie-a-live-scores\/"
        },
        ...
    }
]

, поэтому сначала мы обращаемся к первому элементу массива data [0] и получить его свойство .side1 , которое является другим объектом javascript, затем мы получим свойство name этого объекта .name