javascript - 如何将 JS 变量分配给 JSON 路由

问题描述

所以我正在编写这个 https://vercel.com/eduardodevolmedo/jsd-aily

function executeWeekly() {
  fetch("/data.json")
    .then(function (resp) {
      return resp.json();
    })
    .then(function (data) {


      currentW = data[0].timeframes.weekly.current
      previousW = data[0].timeframes.weekly.previous
      currentWork.innerHTML = `${currentW}${hrs}`
      previousWork.innerHTML = `${lastWeek} - ${previousW}${hrs}`

      //DATA FROM PLAY    

      currentP = data[1].timeframes.weekly.current
      previousP = data[1].timeframes.weekly.previous
      currentPlay.innerHTML = `${currentP}${hrs}`
      previousPlay.innerHTML = `${lastWeek} - ${previousP}${hrs}`

      //DATA FROM STUDY

      currentS = data[2].timeframes.weekly.current
      previousS = data[2].timeframes.weekly.previous
      currentStudy.innerHTML = `${currentS}${hrs}`
      previousStudy.innerHTML = `${lastWeek} - ${previousS}${hrs}`

      //DATA FROM EXERCISE

      currentE = data[3].timeframes.weekly.current
      previousE = data[3].timeframes.weekly.previous
      console.log(currentE, previousE)
      currentExercise.innerHTML = `${currentE}${hrs}`
      previousExercise.innerHTML = `${lastWeek} - ${previousE}${hrs}`

      //DATA FROM SOCIAL

      currentSO = data[4].timeframes.weekly.current;
      previousSO = data[4].timeframes.weekly.previous;
      currentSocial.innerHTML = `${currentSO}${hrs}`
      previousSocial.innerHTML = `${lastWeek} - ${previousSO}${hrs}`

      //DATA FROM SELFCARE

      currentSE = data[5].timeframes.weekly.current;
      previousSE = data[5].timeframes.weekly.previous;
      currentSelfcare.innerHTML = `${currentSE}${hrs}`
      previousSelfcare.innerHTML = `${lastWeek} - ${previousSE}${hrs}`

    })
  eachBlock.forEach(el => el.classList.toggle('animatedBox'))
}

function executeDaily() {
  fetch("/data.json")
    .then(function (resp) {
      return resp.json();
    })
    .then(function (data) {

      //DATA FROM WORK

      currentW = data[0].timeframes.daily.current
      previousW = data[0].timeframes.daily.previous
      currentWork.innerHTML = `${currentW}${hrs}`
      previousWork.innerHTML = `${lastDay} - ${previousW}${hrs}`

      //DATA FROM PLAY    

      currentP = data[1].timeframes.daily.current
      previousP = data[1].timeframes.daily.previous
      currentPlay.innerHTML = `${currentP}${hrs}`
      previousPlay.innerHTML = `${lastDay} - ${previousP}${hrs}`

      //DATA FROM STUDY

      currentS = data[2].timeframes.daily.current
      previousS = data[2].timeframes.daily.previous
      currentStudy.innerHTML = `${currentS}${hrs}`
      previousStudy.innerHTML = `${lastDay}  - ${previousS}${hrs}`

      //DATA FROM EXERCISE

      currentE = data[3].timeframes.daily.current
      previousE = data[3].timeframes.daily.previous
      currentExercise.innerHTML = `${currentE}${hrs}`
      previousExercise.innerHTML = `${lastDay}  - ${previousE}${hrs}`

      //DATA FROM SOCIAL

      currentSO = data[4].timeframes.daily.current;
      previousSO = data[4].timeframes.daily.previous;
      currentSocial.innerHTML = `${currentSO}${hrs}`
      previousSocial.innerHTML = `${lastDay} - ${previousSO}${hrs}`

      //DATA FROM SELFCARE

      currentSE = data[5].timeframes.daily.current;
      previousSE = data[5].timeframes.daily.previous;
      currentSelfcare.innerHTML = `${currentSE}${hrs}`
      previousSelfcare.innerHTML = `${lastDay}  - ${previousSE}${hrs}`

    })
  eachBlock.forEach(el => el.classList.toggle('animatedBox'))
}

所以，我每月和每天都运行完全相同的功能。现在可以工作了，但是我必须为相同的功能复制相同的代码，所以我在想一种方法，我可以用更少的代码行来做到这一点。所以，我的想法是将一个字符串分配给一个变量，然后将其变成一个字符串，使用JSON.stringify()

let z = weekly
let x = JSON.stringify(z)

然后我想，我会使用 if 语句为 html 上的每个按钮分配一个变量，例如，如果按钮值为“每日”，那么 z 将是每日，并且该函数将使用每日作为该参数运行。

然后，我只是将它添加为一个变量，这取决于我想要什么：

currentW = data[0].timeframes.z.current

代替：

currentW = data[0].timeframes.daily.current

这样，我只需要使用一个功能。

但这似乎不起作用。

我怎样才能做到这一点？有什么办法吗？

如果您想进一步检查代码： https ://github.com/EduardoDevOlmedo/JSDaily

标签： javascriptarraysjsonfrontend

javascript - 如何将 JS 变量分配给 JSON 路由

问题描述

解决方案

推荐阅读