关于replace方法改变模板字符串数据时的数据传递问题

最新推荐文章于 2023-03-10 13:15:59 发布

原创最新推荐文章于 2023-03-10 13:15:59 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

cyh的前端学习之路专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了一种从JSON文件中获取数据并将其渲染到前端界面的方法。通过使用JavaScript的$.get方法，从指定路径加载JSON数据，然后利用获取的数据初始化内容列表。文章深入解析了如何迭代JSON数据，构建产品列表及计算总价，并展示了如何将数据插入到模板字符串中，实现动态页面渲染。

// @param string 获取数据
function getList(){
  $.get("../../json/orders.json",
    function (data, textStatus, jqXHR) {
      console.log("我是订单数据组",data);
      var list = data.data.digestlist || [];
      initContentList(list);
    }
    );
}
// @param [] 获取数据
function getProduct(data){
  var list = data.product_list || [];
  list.push({type: 'more'});
  var str = '';
  list.forEach(item => {
    if(item.type === 'more'){
      str += getTotalPrice(data); //这里是data，因为我们要用的是列表的list数据，这里的item数据量很小
    }else{
      str+= `<div class="product-item">`
                +item.product_name+
                    `<div class="p-count">x`
                      +item.product_count+
                    `</div>
            </div>`
    }
  });
  return str;
}
// @param [] 计算总价
function getTotalPrice(data){
  var str = `<div class="product-item">
              <span>...</span>
              <div class="p-total-count">总记`
              +data.product_count+
             `个菜，实付<span class="total-price">`
             +data.total+
             `</span>
              </div>
            </div>`
  return str;
}
function getComment(data){
  var evaluation = !data.is_comment;
  if(evaluation){
    return `<div class="evaluation">
              <div class="evaluation-btn"></div>
            </div>`;
  }
  return '';
}
// @param [] 渲染列表
function initContentList(list){
  list.forEach((item, index) => {
    var str = itemTmpl.replace('$poi_pic', item.poi_pic)
                      .replace('$poi_name', item.poi_name)
                      .replace('$status_description', item.status_description)
                      .replace('$getProduct', getProduct(item))
                      .replace('$getComment', getComment(item));
    $('.order-list').append($(str));
  });
}

逻辑为先通过最上面的getlist，获取所要json，并定义list指代其中的digestlist，把list本身作为参数传给initcontentlist，之后迭代list，每个item相当于单项的digestlist，讲这个单项传给getproduct，在geiproduct里，他有自己的list，指代的是digestlist里的单项里的product_list，之后她迭代这个list，里面数据量很小，但注意getproduct里面进行了gettotalprice，gettotalprice用的参数为data，是和getproduct一样的，没有用item，注意这些变化