How do I handle this JSON response? (JS)

Question

This might be a basic question, but please have some patience as I have little experience working with JSON. I am accessing data from a web API that is returned in this format:

{
  "foo": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  },
  "bar": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  },
  "baz": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  }
}

Without knowing what the foobar values are, would I be able to access the data within them all and return them like this?

[foo, bar, baz]

And if so, how? Thanks in advance.

How are you fetching the data ? Most apis will return this as a javascript object that you can then manipulate how you want — Axnyff, May 03 '20 at 11:58
Does this answer your question? [Standard JSON API response format?](https://stackoverflow.com/questions/12806386/standard-json-api-response-format) — Nikola Lukic, May 03 '20 at 11:59

brk · Answer 1 · 2020-05-03T12:04:04.380

You can use Object.values

let response = {
  "foo": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  },
  "bar": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  },
  "baz": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  }
}
console.log(Object.values(response));
// alternatively you can also use for..in

let arr = [];

for (let keys in response) {
  arr.push(response[keys])
}

console.log(arr);

score 0 · Answer 2 · answered May 03 '20 at 12:08

You could use Object.entries and then map over the entries if you want to keep the key in your array of objects.

const response = {
  "foo": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  },
  "bar": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  },
  "baz": {
    "data1": "this is unique data!",
    "data2": "this is also unique data!",
    "data3": {
      "info": "information!"
    }
  }
}

const arrayOfObjects = Object.entries(response)
  .map(([key, value]) => ({
    [key]: value
  }))

console.log(arrayOfObjects)

How do I handle this JSON response? (JS)

2 Answers2