JSFiddle - React, Tailwind, and code Playground

JavaScript

var data = {
  "goals": [{
      "id": "goal-09",
      "colour": "#FD6925",
      "priority": "People",
      "theme": "Sustainable Infrastructure",
      "title": "Industry, Innovation & Infrastructure",
      "value": 4
    },
    {
      "id": "goal-12",
      "colour": "#BF8B2E",
      "priority": "Planet",
      "theme": "Responsible Consumption",
      "title": "Responsible Consumption & Production",
      "value": 3
    },
    {
      "id": "goal-13",
      "colour": "#3F7E44",
      "priority": "Planet",
      "theme": "Environment",
      "title": "Climate Action",
      "value": 1
    }
  ],
  "planet": 50,
  "people": 50,
  "themes": {
    "Sustainable Infrastructure": 4,
    "Responsible Consumption": 3,
    "Environment": 1,
    "Inclusion": 2,
    "Health and Wellness": 3
  }
}

let i = 0
while (data.goals[i].id) {
  document.write(data.goals[i].id + "=" + data.goals[i].value + " ");
  i++
}

/**
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

while (cars[i]) {
  text += cars[i];
  i++;
}
**/

/**
for (var i in data.goals[0]) {
//alert(data.goals[0][i]);
alert(i+ " : " +data.goals[0][i]);
}

**/

/**
alert(data.goals[0].id.replace('-', ''));
alert(data.planet)
alert(data.people)
alert(data.themes["Sustainable Infrastructure"]);
alert(data.themes["Responsible Consumption"]);
alert(data.themes["Environment"]);
alert(data.themes["Inclusion"]);
alert(data.themes["Health and Wellness"]);
**/


//alert(typeof(goals))            
//alert(Object.keys(goals)[0]); // returns first object
//alert(Object.values(goals));
/**
Object.keys(data.goals).forEach(key => {
 alert(key, data.goals[key]);
});

Object.keys(data).forEach(function(key) {
  alert(key+" "+data[key]); // logs keys in myObject
});
**/
//for (var i in Object.keys(data.goals))  {
//  alert(i.colour)
//}

//alert(Object.values(goals)[0]); // returns first
//alert(Object.keys(goals)); // returns first
//alert(Object.keys(goals)[1]); // returns...