timeline with descriptions

by taffrail

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<ul id="container">

</ul>

JavaScript

const API_KEY = '<YOUR KEY HERE>';
const adviceSetId = 'JUwkw0rpaq3VuNMVlxh6t57';
/* copied from POC */
const params = "?Age_Now=28&Salary=200000&Income_Monthly=12000&Inflation_Rate=0.02&Expenses_Monthly=8000&Debt_Credit_Card_Interest_APR=0.12&401K%3F=true&401K_Company_Match%3F=true&401K_Company_Match_Max_Pct=0.04&401K_Contribution_Current_Pct=0.05&401K_Contribution_Max_Self=20500&401K_Deferral_Max_Pct=0.1025&401K_Deferral_Min_Pct=0.04&401K_Tier1_Match_Pct=1&401K_Tier1_Up_To_Pct=0.08&401K_Tier2_Match_Pct=0.5&401K_Tier2_Up_To_Pct=0.08&401K_Tiers=2&Current_Monthly_Retirement_Savings=1700&Current_Retirement_Savings=10000&Emergency_Fund_Months_Needed=9&Emergency_Fund_Savings_Current=0&Future_Value_Of_Savings_Total=2864789.1693109&IRA_Contribution_Max_Self=6000&Monthly_IRA_Contribution_Current=200&Monthly_IRA_Contribution_Max=500&Monthly_Retirement_Savings_Needed=2921.4750511&Monthly_Retirement_Savings_Other_Current=0&Rate_of_Return=0.06&Retirement_Income_Ratio=0.8&Retirement_Savings_Needed=4857391.3101562&Years_Until_Retirement=37";

const apiUrl = `https://preview.taffrail.app/api/advice/${adviceSetId}${params}`;

fetch(apiUrl, {
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Accept': 'application/vnd.taffrail.json+text'
  }
})
 .then(response => response.json())
 .then(api => {

  let descriptions = api.data.variables.find(variable => {
  	if (variable.name.endsWith("_Description")) {
    	const [goalPrefix] = variable.name.split("_Description"); // "Goal1", "Goal3", etc
    	const { value: goalName } = api.data.variables.find(variable => { return variable.name.startsWith(goalPrefix); }); // the goal name, "Emergency Fund 1"
      
      if (goalName && variable.value) {
        $("#container").append(`<li>
          <h1>${goalName}</h1>
          <div><pre>${variable.name}</pre></div>
          <p>${variable.value}</p>
         </li>`);
      }
    }
  });
  
  
 });