javascript - 从数组中检索数据给出空/未定义

Question

大家好，我正在尝试从数组中控制台记录我的数据，但 URL 和图像始终为空或未定义。我尝试了不同的方法，但没有任何帮助。

它是菜单中的拖放功能，我将这些项目拖到 div#main_dashboard 并需要获取图像的 href、innerText 和 src

let main_dashboard_items = document.getElementById('main_dashboard').children;
        let main_dashboard_items_array = [];
        /*let main_dashboard_items = [];
        for (let i = 0; i < main_dashboard_items_html.length; i++) {
          // At this point we could also push the elements to an array
          main_dashboard_items.push(main_dashboard_items_html[i]);
        }*/
        for(let i=0; i<main_dashboard_items.length; i++){
            // console.log(main_dashboard_items[i].children[0].currentSrc); --> returned undefined
            // console.log(main_dashboard_items[i].href); --> returned undefined
            //console.log(main_dashboard_items[i].getAttribute("href")) --> returned "null"
            let item_arr = {'url': main_dashboard_items[i].getAttribute("href"),
                'text': main_dashboard_items[i].innerText,
                'image': main_dashboard_items[i].children[0].children[0].currentSrc
            };
            main_dashboard_items_array.push(item_arr);
            console.log(main_dashboard_items_array);
        }

<div class="col-10" id="main_dashboard">
            @if(!empty($dashboard_preferences))
                @foreach($dashboard_preferences as $preference)
                    <a href="{{ url($preference->url) }}" class="draggable" draggable="true" style="cursor: grab;"><img src="{{$preference->image}}" alt="new-job" class="logout-icon1">{{$preference->text}}</a>
                @endforeach
            @else
            <ul class="page-sidebar-menu dropzone">
                <a href="{{ url('/new-job') }}" draggable="true" style="cursor: grab; class="draggable">
                    <div class="page-sidebar-menu-icon">
                        <img src="{{ asset('images/Spire-icons-png/New-Job-Dark-Navy.png') }}" alt="N J" class="img-top"/>
                        <img src="{{ asset('images/Spire-icons-png/New-Job-sky-blue.png') }}" alt="N J"/>
                    </div>
                    <span class="title">New Job</span>
                </a>  
            </ul>
            @endif
        </div>

标签： javascriptjquerylaravel

Answer 1

您的代码抛出错误“Uncaught TypeError: Cannot read property 'children' of null”，有关更多详细信息，请参阅开发人员工具 > 控制台。

您应该处理任何空值（如 null、未定义）的代码。只需将您的代码更改为：

let main_dashboard_items = document.getElementById('main_dashboard').children;
        let main_dashboard_items_array = [];
        /*let main_dashboard_items = [];
        for (let i = 0; i < main_dashboard_items_html.length; i++) {
          // At this point we could also push the elements to an array
          main_dashboard_items.push(main_dashboard_items_html[i]);
        }*/
        for(let i=0; i<main_dashboard_items.length; i++){
            // console.log(main_dashboard_items[i].children[0].currentSrc); --> returned undefined
            // console.log(main_dashboard_items[i].href); --> returned undefined
            //console.log(main_dashboard_items[i].getAttribute("href")) --> returned "null"
            let item_arr = {'url': main_dashboard_items[i].getAttribute("href"),
                'text': main_dashboard_items[i].innerText,
                'image': main_dashboard_items[i].children[0] ? (main_dashboard_items[i].children[0].children && main_dashboard_items[i].children[0].children.length > 0 ? main_dashboard_items[i].children[0].children[0].currentSrc : "") : ""
            };
            main_dashboard_items_array.push(item_arr);
            console.log(main_dashboard_items_array);
        }

编辑

现在试试这个：

let main_dashboard_items = document.getElementById('main_dashboard').children;
        let main_dashboard_items_array = [];
        /*let main_dashboard_items = [];
        for (let i = 0; i < main_dashboard_items_html.length; i++) {
          // At this point we could also push the elements to an array
          main_dashboard_items.push(main_dashboard_items_html[i]);
        }*/
        for(let i=0; i<main_dashboard_items.length; i++){
            // console.log(main_dashboard_items[i].children[0].currentSrc); --> returned undefined
            // console.log(main_dashboard_items[i].href); --> returned undefined
            //console.log(main_dashboard_items[i].getAttribute("href")) --> returned "null"
            let item_arr = {'url': main_dashboard_items[i].children[0].getAttribute("href"),
                'text': main_dashboard_items[i].children[0].children[1].innerText,
                'image': main_dashboard_items[i].children[0].children[0].children[0].src,
                'anotherImage' : main_dashboard_items[i].children[0].children[0].children[1].src
            };
            main_dashboard_items_array.push(item_arr);
            console.log(main_dashboard_items_array);
        }