时间戳

首页 > 解决方案 > 使用 javascript 将 favico 图像从数据库显示到 html 显示“未定义”

javascript - 使用 javascript 将 favico 图像从数据库显示到 html 显示“未定义”

问题描述

我已经在 SO 上阅读了很多类似的示例，但我无法弄清楚问题出在哪里。图像成功显示在 html 上，item.picture并且它的 url 也可以打印在控制台上。

但是，控制台和 html 上都favico显示。 这是示例代码：undefined

$(function () {
  jQuery.ajax({
    type:'GET',
    url:"api/wedding/?format=json&limit=20",
    dataType:"json",
    success :function (data) {
      var listA=$("#wedding_id");
      for(var i=0;i<data.results.length;i++) {
        var  item=newDiv(data.results[i])
        listA.append(item);
      }
    },
    error:function (e) {
      console.log(e) // Better for debugging
      // alert("Error" + e)
    }
  });
});

function newDiv(item)
  {
  if (item.pic) {
    var wed_pic = item.pic.split(",")[0];
  }
  if (item.favico) {
    var favicon = item.favico.split("/")[0]; 
  }
  console.log(item.pic); // <--- can display the pic_url on console
  console.log(favicon); //shows  'undefined'
 
  var template = '<ul class="wedding-list" id='+ item.wedding_id +'>'
               + '<a class="wedding-icon" href="#">' + favicon + '</a>'  //<--- where I think lies the problem
               + '<a class="wed_img" target="_blank" href=' + item.url + '>' 
               + '<img src=' + wed_pic + '>' 
               + '</a> </ul>' +
  return template
  }

什么可能是undefined错误的原因？感谢您的帮助。

标签： javascripthtmldatabaseundefinedfavicon

解决方案

作为一个开始

const listA = document.querySelector('#wedding_id')
  ;
fetch ('api/wedding/?format=json&limit')
  .then (res => res.json())
  .then (data =>
    {
    for (let row of data.results)
      listA.appendChild( newDiv(row))  
    })
  .catch (err => console.error(err)) 
  ; 
function newDiv(item)
  {
  let
    e_UL    = document.createElement('ul')
  , wed_pic = !!item?.pic    ? item.pic.split(',')[0]    : ''
  , favicon = !!item?.favico ? item.favico.split('/')[0] : ''
    ;
  console.log('item ----->', JSON.stringify(item,0,2) )
  console.log('wed_pic  ->', wed_pic  )
  console.log('favicon  ->', favicon  ) 
  
  e_UL.id        = item.wedding_id
  e_UL.className = 'wedding-list'
  e_UL.innerHTML = ` 
    <a class="wedding-icon" href="#"> ${favicon} </a> 
    <a class="wed_img" target="_blank" href="${item.url}">
      <img src="${wed_pic}">
    </a>`
    
  return e_UL
  }

推荐阅读