вывод многомерного массива в html по 4 товара в строку через js

Question

Как правильно вывести 4 товара в строку, затем еще ниже 4 по средством js? из предыдущего задания есть код таблицы 

https://jsfiddle.net/novikov433/yhdr1nvk/

нужно сделать все тоже самое, но по аналогии с уроком https://www.youtube.com/watch?v=WeVQwPBsZJY

https://jsfiddle.net/novikov433/9bekpna7/1/ 

то есть, понять как через бутсрап, флексбокс указать в дом свойствах что только у первых 4 элементов ширина = 25%, все остальные на строку ниже .

Answer 1

Вот так например

let data = [
	{
		name: {
			ru:'МТЗ',
			ua: 'МТЗ',
		},
		model: '82.1',
		country: {
			ru:'Беларусь',
			ua: 'Білорусь',
		},
		price: '1.11',
	},
	{
		name: {
			ru:'МТЗ',
			ua: 'МТЗ',
		},
		model: '892',
		country: {
			ru:'Беларусь',
			ua: 'Білорусь',
		},
		price: '1.21',
	},
	{
		name: {
			ru:'МТЗ',
			ua: 'МТЗ',
		},
		model: '920',
		country: {
			ru:'Беларусь',
			ua: 'Білорусь',
		},
		price: '1.31',
	},
	{
		name: {
			ru:'МТЗ',
			ua: 'МТЗ',
		},
		model: '92П',
		country: {
			ru:'Беларусь',
			ua: 'Білорусь',
		},
		price: '1.22',
	}
];

for (let i = 0; i < data.length; i++) {
    let templ = `<div class="col-3">
        <div class="grid__count">`+data[i]['name']['ru']+`</div>
        <a class="grid__link" href="">`+data[i]['model']+`</a>
        <div class="grid__name">`+data[i]['country']['ru']+`</div>
        <div class="grid__name">`+data[i]['price']+`</div>
    </div>`;

    $('#rezult').append(templ);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="rezult"></div>

БЛОГ НА HUSL

вывод многомерного массива в html по 4 товара в строку через js

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