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
  }
}
//alert(typeof(goals))            
//alert(Object.keys(goals)[0]); // returns first object
//alert(Object.values(goals));

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 second
//alert(Object.keys(goals)[2]); // returns third
//alert(Object.keys(goals)[3]); // returns fourth