Получение данных из массива дает null / undefined

Question

Привет, ребята, я пытаюсь сохранить журнал моих данных из массива, но URL и изображение всегда имеют значение null или undefined. Я пробовал разные подходы, но мне пока ничего не помогло.

Это функция перетаскивания из меню. Я перетаскиваю эти элементы в div # main_dashboard, и мне нужно получить href, innerText и sr c изображений

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

Ваш код выдает ошибку «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);
        }

EDIT

Теперь попробуйте следующее:

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