Iterating through nested JSON object with variable Key Names - Javascript

user2379391
April 4, 2023
253 views
2 votes
3 Answers

updated — as the help provided was still not returning the desired results and thought that it could be in regards to how I presented the question

I am new to JSON and Struggling to work with this result in Javascript.

I am using this fetch to get a response that is returned as an object with nested objects and I am struggling to filter the results for the category with the value "mobile" only

any help would be greatly appreciated!

Tags: javascript json

Answers

You can use lodash pickBy:

const results ={android8_gmailapp_pixel2_lm:{category:"web",client:"Gmail App",display_name:"Gmail App Pixel 2",id:"android8_gmailapp_pixel2_lm",os:"Android 8",screenshots:{default:"https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n"},status:"Complete",thumbnail:"https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"},android8_gmailapp_pixel2_lm:{category:"mobile",client:"Gmail App",display_name:"Gmail App Pixel 2",id:"android8_gmailapp_pixel2_lm",os:"Android 10",screenshots:{default:"https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n"},status:"Complete",thumbnail:"https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"}};

const filteredResults = _.pickBy(results, { category: 'mobile' });
console.log(filteredResults);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

If your response is an array of objects, where each object has a varying key and an associated object, you can use Object.values to grab the associated object, and check the category of the first value.

const response = [{
  android8_gmailapp_pixel2_lm: {
    category: "web",
    client: "Gmail App",
    display_name: "Gmail App Pixel 2",
    id: "android8_gmailapp_pixel2_lm",
    os: "Android 8",
    screenshots: {
      default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n',
    },
    status: "Complete",
    thumbnail: "https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"
  },
}, {
  android8_gmailapp_pixel2_lm: {
    category: "mobile",
    client: "Gmail App",
    display_name: "Gmail App Pixel 2",
    id: "android8_gmailapp_pixel2_lm",
    os: "Android 10",
    screenshots: {
      default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n',
    },
    status: "Complete",
    thumbnail: "https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"
  }
}];

const filteredResults = response.filter(obj =>
  (([{ category }]) => category === 'mobile')
  (Object.values(obj)));

console.log(filteredResults);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Assuming your test data is an array of objects (as current form is not correct),

var testData = [
  {android8_gmailapp_pixel2_lm: {
    category: "web",
    client: "Gmail App",
    display_name: "Gmail App Pixel 2",
    id: "android8_gmailapp_pixel2_lm",
    os: "Android 8",
    screenshots: {
      default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n',
    },
    status: "Complete",
    thumbnail: "https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"
  }
  },
  {
    android8_gmailapp_pixel2_lm: {
      category: "mobile",
      client: "Gmail App",
      display_name: "Gmail App Pixel 2",
      id: "android8_gmailapp_pixel2_lm",
      os: "Android 10",
      screenshots: {
        default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n'
      },
      status: "Complete",
      thumbnail: "https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"
    }
  }
  ];

and also assuming you will have more devices in the array, the following should work just fine:

let newList = [];
testData.forEach(device => {
    let idx = Object.keys(device)[0];
    if (device[idx].category === "mobile") {
        newList.push(device[idx]);
    };
});

Then you should get a list of matches as follows:

[
  {
    category: 'mobile',
    client: 'Gmail App',
    display_name: 'Gmail App Pixel 2',
    id: 'android8_gmailapp_pixel2_lm',
    os: 'Android 10',
    screenshots: {
      default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n'
    },
    status: 'Complete',
    thumbnail: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n'
  }
]

// Online Javascript Editor for free
// Write, Edit and Run your Javascript code using JS Online Compiler
var a = [
  {android8_gmailapp_pixel2_lm: {
    category: "web",
    client: "Gmail App",
    display_name: "Gmail App Pixel 2",
    id: "android8_gmailapp_pixel2_lm",
    os: "Android 8",
    screenshots: {
      default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n',
    },
    status: "Complete",
    thumbnail: "https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"
  }
  },
  {
    android8_gmailapp_pixel2_lm: {
      category: "mobile",
      client: "Gmail App",
      display_name: "Gmail App Pixel 2",
      id: "android8_gmailapp_pixel2_lm",
      os: "Android 10",
      screenshots: {
        default: 'https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd…QUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG0ucG5n'
      },
      status: "Complete",
      thumbnail: "https://images.emailonacid.com/d2ViL3BHeWNzYWpRZzd5Y1JoY3piUXJDbXBwdFpiWGhOOFN0bGROZkdLN1JQUzFkSy9hbmRyb2lkOF9nbWFpbGFwcF9waXhlbDJfbG1fdG4ucG5n"
    }
  }
  ]
  let newList = [];
a.forEach(device => {
    let idx = Object.keys(device)[0];
    if (device[idx].category === "mobile") {
        newList.push(device[idx]);
    };
});
console.log(newList);

Please signup or login to give your own answer.

Click here to cancel reply.

Iterating through nested JSON object with variable Key Names – Javascript

Answers