未捕获的类型错误：无法读取未定义的属性（读取“forEach”）

Question

我想在我的项目中使用 Youtube API，用户可以在其中搜索视频，并在用户输入时显示搜索结果。我只熟悉python和django。所以，我正在使用一个教程来做 JS 部分来添加 ajax。我的代码中的所有内容都与教程中显示的完全相同，但我的代码不起作用。

所以我的 ajax javascript 是：

<!--        javascript for ajax-->



 <script>
        var delayTimer;
        $("#div_id_search_form").keyup(function() {
            clearTimeout(delayTimer);
            $('#search_results').text('Loading...');
            delayTimer = setTimeout(function() {
              var text = $("#div_id_search_form").val();
              $.ajax({
                url: '/video/search',
                data: {
                  'search_term': text
                },
                dataType: 'json',
                success: function(data) {

                var results = '';
                $('#search_results').text('');
                data['items'].forEach(function(video){
                  results += video['snippet']['title']
                });


                $('#search_results').append(results);


                }
              });
           }, 1000);
         });
    </script>

这是我使用 API 的 views.py 文件：

def video_search(request):
    search_form = SearchForm(request.GET)
    if search_form.is_valid():
        encoded_search_term = urllib.parse.quote(search_form.cleaned_data['search_term'])
        response = requests.get(f'https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=6&q={ encoded_search_term }&key={ YOUTUBE_API_KEY }')
        return JsonResponse(response.json())
    return JsonResponse({'error': 'Not able to validate form'})

我的目标不是现在显示 youtube 视频。我的目标是在用户输入时简单地显示“正在加载...”，如果用户停止输入一秒钟，它会在搜索栏中显示与该术语相关的 6 个视频标题。所以，我想问题出在 Javascript 中。

此外，它正在运行到“正在加载...”部分，但一旦用户停止输入，它什么也不显示。

这是它在控制台上显示的错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at Object.success (addvideo:75)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

我现在对 JS 一无所知，所以请尽可能具体。这是一个 django 项目，只需要在这部分使用 javascript。

如果您需要更多信息，请告诉我。

提前谢谢你！

来自 YouTube 搜索 API 的应用程序/Json 代码：

{
  "kind": "youtube#searchListResponse",
  "etag": "eZ_XegkOrAIwxYDVnpYZmKbrfbE",
  "nextPageToken": "CAYQAA",
  "regionCode": "CA",
  "pageInfo": {
    "totalResults": 1000000,
    "resultsPerPage": 6
  },
  "items": [
    {
      "kind": "youtube#searchResult",
      "etag": "U21Po-KMvdNZ7xiYZgqhPjinEps",
      "id": {
        "kind": "youtube#video",
        "videoId": "ma67yOdMQfs"
      },
      "snippet": {
        "publishedAt": "2021-01-23T17:00:15Z",
        "channelId": "UC--3c8RqSfAqYBdDjIG3UNA",
        "title": "These Were The All-Time Surfing Moments Of The Year | Best Of 2020",
        "description": "Well, that was a weird ride. Though it hasn't been easy, at least when we fixed our gaze on the ocean — or favorite place in the world – very little had changed.",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/ma67yOdMQfs/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/ma67yOdMQfs/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/ma67yOdMQfs/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "Red Bull Surfing",
        "liveBroadcastContent": "none",
        "publishTime": "2021-01-23T17:00:15Z"
      }

Answer 1

我在该页面上为我的表单使用 Crispy Forms，它阻止了代码运行。我不知道为什么，但是一旦我删除了松脆的表格，代码就可以正常工作。我现在使用小部件调整而不是脆的形式。