How to assign a JS variable to a JSON route-CodePudding

So I'm coding this 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'))
}

So, im running the exact same function at monthly, and daily. Which is now working, but i had to copy the same code for the same functions, so I was thinking in a way I could do it in less lines of code. So, my idea was to assign a string to a variable, and then making it a string, using JSON.stringify()

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

Then i thought, that I would assing a variable to each button on html, using an if statement, for example if the button value was "daily" then z would be daily, and the function would run using daily as that argument.

And then, I just add it like a variable, depending on what i want:

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

instead of:

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

In that way, I would only need to use one function.

But that doesn't seems to work.

How can I do this? Is there any way?

If you want to check the code further: https://github.com/EduardoDevOlmedo/JSDaily

CodePudding user response：

You have to access the object member as if the object was an associative array:

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

CodePudding user response：

Solved:

Accessing to

this.innerHTML

and assigning the value to z.

function check(){
value = this.innerHTML
execute(value)
}