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

Question

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

这是菜单中的拖放功能，我将这些项目拖到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>

Answer 1

您的代码抛出错误“未捕获的TypeError：无法读取null的属性'children'，请参阅开发人员工具>控制台以获取更多详细信息。

您应该处理任何空值（如null，undefined）的代码。只需将您的代码更改为此：

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);
        }