Просканировать объект и получить данные

Question

<div class="response--photo--upload">
    <a data-fancybox="gallery" href="https://i.imgur.com/HULaZZP.jpg">
        <div class="d-inline-block upload--photo--view">
            <button class="upload--photo--close">
                <i class="fas fa-times" aria-hidden="true"></i></button>
            <img src="https://i.imgur.com/BnDvdvN.jpg" width="80">
        </div>
    </a>
    <a data-fancybox="gallery" href="https://i.imgur.com/qtp5Ybs.jpg">
        <div class="d-inline-block upload--photo--view">
            <button class="upload--photo--close">
                <i class="fas fa-times" aria-hidden="true"></i></button>
            <img src="https://i.imgur.com/e7tsLc8.jpg" width="80">
        </div>
    </a>
</div>

Есть объект response--photo--upload в нем есть множество <a><img></a>

Вопрос: Как просканировать родительский объект и получить href у a и src у img (для каждого <a>) и занести все данные в JSON?

Answer 1

если надо составить объекты с учетом связанности (вложенности), то сначала перебираете внешние a, и для каждой находите внутри img. Если надо просто все ресурсы выцепить, то сразу перебираете a,img и вытаскиваете атрибуты.
Кодирование в JSON через JSON.stringify.
Если исходный фрагмент html приходит в качестве строки то делаете $(html_string) и ищите в ней вместо $(".response___)

let obj = $(".response--photo--upload");
let result = obj.find("a").map(function(){
               return {
                 href : $(this).attr('href'),
                 src  : $(this).find('img').attr('src')
               };
            }).get();
            
console.log(result);

let result2 = obj.find("a, img")
                 .map((idx,v) => v.href || v.src)
                 .get();
                 
console.log(result2);

//JSON.stringify(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="response--photo--upload">
    <a data-fancybox="gallery" href="https://i.imgur.com/HULaZZP.jpg">
        <div class="d-inline-block upload--photo--view">            
            <img src="https://i.imgur.com/BnDvdvN.jpg" width="80">
        </div>
    </a>
    <a data-fancybox="gallery" href="https://i.imgur.com/qtp5Ybs.jpg">
        <div class="d-inline-block upload--photo--view">            
            <img src="https://i.imgur.com/e7tsLc8.jpg" width="80">
        </div>
    </a>
</div>

БЛОГ НА HUSL

Просканировать объект и получить данные

Ответы (1 шт):