Is it possible to upload Json into several different blocks?

Question

JavaScript

Good morning everyone.
I ran into a problem and I don't know how to solve it, so I'm asking for your help.
I have a Json file that I output like this.

var out = '';
    for (var key in data) {
        out += '<div class="goods">';

        out += `<img class="goods_img" src="${data[key].image}">`;
     
        out += `<p class="show_goods-category">${data[key].category}</p>`;
        out += '</div>';
    }
    $('#goods').html(out);    //вывод  информации в ('#goods')

the output is this picture.

<div id="goods">
'<div class="goods">

<img class="goods_img" src="images/apple.png">
<p class="goods-category">Акция</p>

</div>

'<div class="goods">

<img class="goods_img" src="images/tomato.png">
<p class="goods-category">в наличии</p>

</div>

'<div class="goods">

<img class="goods_img" src="images/strawberry.png">
<p class="goods-category">под заказ</p>

</div>
</div>

and everything is dumped into one block ('#goods'). but this is not quite what you need , is it

possible to do so that
all blocks with $('.goods-category') == "Stock" are unloaded into a container with the class $('.stock-goods');
all blocks with $('.goods-category') == "in stock" were unloaded into the container with class $('.in-stock-goods');
all blocks with $('.goods-category') == "on order" were unloaded into a container with the class $('.order-goods');

I will be very grateful for your help.

Answer 1

try using a switch to check data[key].category and perform DOM manipulations in the required block. it looks something like this:

switch(data[key].category)
    {
        case 'Акции':
            $(out).appendTo('.stock-goods');
            break;
        case 'в наличии':
            $(out).appendTo('.in-stock-goods');
            break;
        case 'под заказ':
            $(out).appendTo('.order-goods');
            break;
    }

just set the out variable to zero on each iteration.