screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>Original JSON Objects:</p> <pre v-for="(obj, index) in originalObjs" :key="index">{{ obj }}</pre> <p>Filtered JSON Objects:</p> <pre v-for="(obj, index) in filteredObjs" :key="index">{{ obj }}</pre> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { originalObjs: [ { name: 'John', age: null, address: { street: '123 Main St', city: '', state: 'CA' } }, { name: 'Jane', age: 25, address: { street: '456 Oak Ave', city: 'New York', state: null } } ], filteredObjs: null }; }, mounted() { // Filter each object in originalObjs array this.filteredObjs = this.originalObjs.map(obj => { // Convert object to string and remove null values and empty strings const filteredJSON = JSON.stringify(obj, (key, value) => { return (value === null || value === '') ? undefined : value; }); // Convert string back to JSON object return JSON.parse(filteredJSON); }); } }); </script> <style scoped> #app { font-family: Arial, sans-serif; margin: 20px; } p { font-weight: bold; margin-bottom: 10px; } pre { background-color: #f7f7f7; border-radius: 5px; padding: 10px; margin-bottom: 20px; overflow-x: auto; } </style> </body> </html>