${info.href}无法取到值

var Booklist = document.getElementsByClassName('book-list')[0];

var template='';
for(var i=0;i<20;i++){
    var info= dataArr[i];
    template += `
                <li class="book-item">
                    <a target="_blank" href="${info.href}">
                        <div class="item-pic">
                            <img src="${info.img_src}">
                        </div>
                        <div class="item-info">
                            <div class="item-desc">${info.desc}</div>
                        </div>
                    </a>
                </li>`;

}
Booklist.innerHTML=template;

var dataArr =[
    {
        "href":"https://www.baidu.com/",
        "img_src":"image/1.jpg",
        "desc": "测试"
    }];

for(var i=0;i<20;i++)这个，数据只有1个怎么循环20呢