Javascript: Iterate Loop through object

Question

Given the following json object structure, I need to fetch the id and value for each of the goals object as well as planet, people, and theme's object value also.

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
  }
}

I have tried a couple of loops but this is a bit difficult, also you can have up to 17 goals and up to 5 different themes.

Object.keys(data).forEach(function(key) {
  alert(key+" "+data[key]); // logs keys in myObject
});

This is where I am testing https://jsfiddle.net/dhzpqo4n/ and I will be fetching the json string from sessionStorage.

the end goal is to construct a sql update statement to store these in a table with the following structure

update I've come up with the following script which is a step in the right direction to construct my sql update statement with the values if each of the goals.

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

Which gives goal-09=4 goal-12=3 goal-13=1 https://jsfiddle.net/3r49zqsu/4/

Answer 1

Create an array and push the result as follows:

1) if val is an array then loop through it to get the object's id and value. Then push it into result array.

2) If it is an object then first convert it into key=value form and then push it into result array.

3) else push the result as default key=value form

then finally join the array with space. That's it.

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,
  },
};

let result = [];
for (let key in data) {
  const val = data[key];
  if (Array.isArray(val)) {
    const temp = val.map(({ id, value }) => `${id}=${value}`);
    result = result.concat(temp);
  } else if (typeof val === "object") {
    const temp = Object.entries(val).map(([k, v]) => `${k}=${v}`);
    result = result.concat(temp);
  } else {
    result.push(`${key}=${val}`);
  }
}

console.log(result.join(" "));

You can simplify a bit

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,
  },
};

let result = [];
function pushInFinalResult(arr) {
  result = [...result, ...arr];
}

for (let key in data) {
  const val = data[key];
  if (Array.isArray(val)) {
    pushInFinalResult(val.map(({ id, value }) => `${id}=${value}`));
  } else if (typeof val === "object") {
    pushInFinalResult(Object.entries(val).map(([k, v]) => `${k}=${v}`));
  } else {
    pushInFinalResult([`${key}=${val}`]);
  }
}

console.log(result.join(" "));

Removing spaces and -

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,
  },
};

let result = [];
function pushInFinalResult(arr) {
  result = [...result, ...arr];
}

for (let key in data) {
  const val = data[key];
  if (Array.isArray(val)) {
    pushInFinalResult(
      val.map(({ id, value }) => `${id.replace("-", "")}=${value}`) // change
    );
  } else if (typeof val === "object") {
    pushInFinalResult(
      Object.entries(val).map(([k, v]) => `${k.replace(" ", "")}=${v}`) // change
    );
  } else {
    pushInFinalResult([`${key}=${val}`]);
  }
}

console.log(result.join(" "));

Answer 2

Do you mean something like this?

{goals: data.goals.map(k=>{return {id:k.id,value:k.value}}),planet:data.planet,people:data.people,themes:data.themes}

What happens here is it loops through all the goals and returns an object of only the id and the value.