Exploring the contents of the response object

Question

Exploring the contents of the response object

I'm facing what seems to be a minor issue that I can't seem to resolve. The response body I have looks like this:

with the keys representing shoe sizes and the values indicating the quantity for each size. How can I access these sizes effectively? Currently, my approach is as follows:

const sizesArray = response.data.sizes

const arr = Object.values(msizes);
    console.log('arr', arr);
    arr.map((i,a) => {
        console.log('i',i);
        console.log('a',a);
    })

However, 'i' turns out to be another object {43: 35} and 'a' is simply the index. I want to somehow assign the key to a parameter called 'sizes' and the value to a parameter called 'quantity'.

https://codesandbox.io/s/confident-ishizaka-rqjvbv?fontsize=14&hidenavigation=1&theme=dark

javascript json object

Answer 1

Answer №1

To simplify retrieving keys from an object in JavaScript, consider using Object.keys instead of Object.entries

For example:

const data = { sizes: [{ "43": 35 }, { "42": 20 }, { "38": 10 }] };

const result = data.sizes.map((element, index) => {
  let obj = Object.keys(element); // retrieve keys as an array
  let key = obj[0]; // get the first key
  let quantity = element[key]; // access value using the retrieved key
  console.log("size", key);
  console.log("quantity", quantity);
});

Answer 2

To simplify retrieving keys from an object in JavaScript, consider using Object.keys instead of Object.entries

For example:

const data = { sizes: [{ "43": 35 }, { "42": 20 }, { "38": 10 }] };

const result = data.sizes.map((element, index) => {
  let obj = Object.keys(element); // retrieve keys as an array
  let key = obj[0]; // get the first key
  let quantity = element[key]; // access value using the retrieved key
  console.log("size", key);
  console.log("quantity", quantity);
});

Answer 3

Answer №2

To extract the keys from objects in the sizes array, you can use the reduce method and store them in an output array:

const data = { sizes: [{ "43": 35 }, { "42": 20 }, { "38": 10 }] }

const sizes = data.sizes.reduce((acc, s) => acc.concat(Object.keys(s)), [])

console.log(sizes)

If you need both sizes and quantities, a similar approach can be taken. Create an object that accumulates both sets of values:

const data = { sizes: [{ "43": 35 }, { "42": 20 }, { "38": 10 }] }

const { sizes, quantities } = data.sizes
  .reduce((acc, s) => {
     acc.sizes = acc.sizes.concat(Object.keys(s))
     acc.quantities = acc.quantities.concat(Object.values(s))
     return acc
   },
   { sizes : [], quantities : [] })

console.log(sizes)
console.log(quantities)

Answer 4

To extract the keys from objects in the sizes array, you can use the reduce method and store them in an output array:

const data = { sizes: [{ "43": 35 }, { "42": 20 }, { "38": 10 }] }

const sizes = data.sizes.reduce((acc, s) => acc.concat(Object.keys(s)), [])

console.log(sizes)

If you need both sizes and quantities, a similar approach can be taken. Create an object that accumulates both sets of values:

const data = { sizes: [{ "43": 35 }, { "42": 20 }, { "38": 10 }] }

const { sizes, quantities } = data.sizes
  .reduce((acc, s) => {
     acc.sizes = acc.sizes.concat(Object.keys(s))
     acc.quantities = acc.quantities.concat(Object.values(s))
     return acc
   },
   { sizes : [], quantities : [] })

console.log(sizes)
console.log(quantities)

Answer 5

Answer №3

You're definitely on the right path :)

Try using Object.keys() to extract an array which contains all your keys (shoe sizes). After that, utilize the map() function to generate a new array. Use the index within the map() method to retrieve the quantity from your response.

const sizesArray = response.data.sizes

const sizes = Object.keys(sizesArray);
const result = sizes.map((element, index) => ({
  size: element, 
  quantity: sizesArray[index]
}));

console.log(result);

Answer 6

You're definitely on the right path :)

Try using Object.keys() to extract an array which contains all your keys (shoe sizes). After that, utilize the map() function to generate a new array. Use the index within the map() method to retrieve the quantity from your response.

const sizesArray = response.data.sizes

const sizes = Object.keys(sizesArray);
const result = sizes.map((element, index) => ({
  size: element, 
  quantity: sizesArray[index]
}));

console.log(result);

Exploring the contents of the response object

Answer №1

Answer №2

Answer №3

Similar questions

Parsing and encoding JSON data involves traversing a multi-dimensional array and eliminating key-value pairs that match a specific value

What is the best method for providing an argument to JavaScriptCore/Console through the terminal or another method?

How can I display Google Maps markers on my map?

What is the best way to handle JSON with unconventional syntax in an Android application?

Troubleshooting problem with Bootstrap tabs and jQuery event triggering

Tactile interactions on iPhone

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

Why is the useHistory hook in React failing to function properly?

How can I force an element to overflow without being affected by its parent's overflow style in CSS/HTML/JS, even if the parent is

Internet Explorer does not support the shorthand for defining associative arrays in Javascript

Encountered an error while trying to create a new NestJS project using yarn: Command execution failure - yarn install --

CORS request results in unsuccessful cookie setting in browsers except for Firefox where Set-Cookie header is detected; notably, Chrome does not show the header

JavaScript transforming an array into a counter

Interacting with directive scope beyond controller boundaries

Tips for illustrating the connection between two distinct schemas during a discussion

Error message "mapStateToProps() in Connect(ModalRoot) must return an object literal. Received undefined." was thrown by the React-Redux container

What steps should I take to resolve the "undefined property match cannot be read" error that's showing up in this code?

Serializing dates in JSON format in ASP.NET RESTful services

Convert form data into a JSON object utilizing JQuery and taking into account nested JSON objects

Directive @input: Hold until the user completes their query