Struggling to extract specific information from JSON data that I need to import.
Here is the sample data I'm working with:
I am trying to extract details like the name, description, and professor for each entry.
This is how I'm importing the data:
Struggling to extract specific information from JSON data that I need to import.
Here is the sample data I'm working with:
I am trying to extract details like the name, description, and professor for each entry.
This is how I'm importing the data:
Start by creating a computed property.
Utilize Object.values to generate an array containing the values of properties in the
proposedCourses object.
Next, employ Array.prototype.map to extract the name,
description, and professors attributes for each object.
The computed property will produce:
Object.values(this.proposedCourses).map(({ name, description, professors }) => ({ name, description, professors }))Once this is done, utilize v-for to loop through the items in the computed property.
Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
el: '#app',
data() {
return {
proposedCourses: {
"0bEiO5zcBCHv3Wd2lxHjjRepB": {
"name": "math",
"credits": 4,
"professors": [
"Samatha"
],
"description": "come and learn some math",
"prereqs": "",
"comment": "",
"maxEnrollment": 100,
"times": [{
"day": 2,
"start": 900,
"end": 1100
},
{
"day": 4,
"start": 900,
"end": 1100
}
],
"departments": [
"mathematics"
],
"submitted": true
},
"BsSbrbjTH5FyV7gWdPjeDPqpw": {
"name": "biology",
"credits": 4,
"professors": [
"Reuven"
],
"description": "learn about biology and stuff",
"prereqs": "",
"comment": "",
"maxEnrollment": 20,
"times": [{
"day": 3,
"start": 900,
"end": 1100
},
{
"day": 4,
"start": 900,
"end": 1100
}
],
"departments": [
"biology"
],
"submitted": true
}
}
}
},
computed: {
courses() {
return Object.values(this.proposedCourses).map(({
name,
description,
professors
}) => ({
name,
description,
professors
}))
}
}
})<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
<ul>
<li v-for="{ name, description, professors } in courses" :key="name">
<p>{{ name }}</p>
<p>{{ description }}</p>
<p>{{ professors }}</p>
</li>
</ul>
</div>One way to approach this is by utilizing:
for(var item in collection) {
var newObj = {
title: item.title,
info: item.info,
instructor: item.instructor
};
console.log(newObj); // This newObj can be used for additional processing
}
I implemented JavaScript code to animate scrolling for each block with a specific ID. However, when I added Bootstrap's tabs, the animation interfered with the functionality of the tabs. Is there a way to disable the scroll animation specifically for ...
I've encountered a situation where I'm utilizing a service file to execute a stored procedure: function createCampaign($campaignName, $groupNumber){ $stmt = \DB::connection('odbc')->getPdo()->prepare('CALL SCHE ...
I have been attempting to reset the input fields for a login when the loginDiv display is set to none, but unfortunately it does not seem to be working as expected. My goal is for the input fields to reset whenever the login button is clicked and the logi ...
I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...
I recently developed a React component using Material UI which looks like the code snippet below: <Popper open={open} anchorEl={anchorRef.current} onBlur={handleToggle} transition disablePortal > <MenuList autoFocusItem={open}> ...
Currently, I am a newcomer to vue.js and I am on the lookout for methods to effectively store form data using axios into a database. The technologies involved in my project are spring framework along with Thymeleaf template engine. Below is a snippet of m ...
My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button. The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the ...
node:events:495 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE: address already in use :::5000 at Server.setupListenHandle [as _listen2] (node:net:1817:16) at listenInCluster (node:net:1865:12) at Server. ...
Currently, I am engaged in a Django project that utilizes Vue.js for the frontend. Whenever I refresh the page, I encounter the "[WDS] Disconnected!" error. Despite the website's full functionality and absence of issues, this error appears every time ...
I am in the process of setting up a dropdown menu for all 50 states using an object that contains state names as attributes. Here's an example: window.LGMaps.maps.usa = { "paths": [ { "enable": true, "name": "Alaba ...
While Material-UI allows you to utilize withStyles() for creating a Button with a predefined set of styles, I am curious if it is achievable to achieve the same result using props instead. This would ensure that all custom buttons I create automatically ha ...
I have encountered a puzzling problem with my two karma tests for Vue.js. Individually, they pass successfully, but when executed as part of a suite, one of them fails unexpectedly. Although I am relatively new to JS testing, I suspect that there might be ...
I want to collect all the values from input fields and display them on the website. Check out my code snippet below: var button = document.querySelector("button"); button.addEventListener("click", function() { var inputs = document.querySelectorAll( ...
As a newcomer to Typescript (and Javascript), I've been experimenting with classes. My goal is to create an object that can be filled with similar entries while maintaining type safety in a concise manner. Here is the code snippet I came up with: le ...
Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...
I'm populating a table with multiple rows using props. If a returned prop is an empty string "" , I want to exclude that row from rendering. <Table.Body> <Table.Row> <Table.Cell>Producer</Table.Cell> ...
Our application framework is built on Angular 9, providing customers the ability to customize applications with different fields and layouts. This functionality works smoothly. However, we now face a situation where a customer wants to incorporate special ...
I have a collection of components structured like this: var names = 1)"lat: 40.6447077, lng: -73.878421, address: 1600 Pennsylvania Avenue, Brooklyn, NY 11239, USA" 2)"lat: 40.609099, lng: -73.931516, address: 2015 E. 35th street, Brooklyn, Ny, Un ...
I am trying to extract the values from each object within the attendance array in my JSON data: {"name":" ","course":"","attendance":[{"name":"INTERNATIONAL FINANCE","type":"Theory","conducted":"55","present":"50"},{"name":"INDIAN CONSTITUTION","type":"Th ...
Looking to incorporate an external and non-commonJS library to define an AngularJS module. What is the best approach since directly importing it won't work, like this: import MyLibrary from 'MyLibraryPath' angular.module('MyApp' ...