further work jquery query api

src/App.vue

@@ -17,12 +17,10 @@
 				<Breadcrumb title="Top" href="/Top" />
 			</Breadcrumbs>
 			<Table
-				:data="tableData"
-				station-name="SRF Virus"
+				:stationData="tableData"
 				station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
 				station-isfav="false"
 				station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
-			{{ tableData }}
 		</AppContent>
 	</Content>
 </template>
@@ -51,9 +49,10 @@ export default {
 		tableData: undefined,
 	}),
 	mounted() {
-		this.$jquery.get('https://de1.api.radio-browser.info/json/stations/topclick?limit=10')
-			.function((data) => {
-				this.tableData = data
+		const vm = this
+		this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=10')
+			.done(function(data) {
+				vm.tableData = data
 			})
 	},
 }

src/components/Table/Table.vue

@@ -9,14 +9,14 @@
 				<th />
 			</tr>
 		</thead>
-		<tbody>
-			<tr v-if="tableData">
+		<tbody v-if="stationData">
+			<tr v-for="(obj, ind) in stationData" :key="ind">
 				<td>
 					<div class="stationIcon" :style="style" />
 				</td>
 				<td class="filenameColumn">
 					<span class="innernametext">
-						{{ stationName }}
+						{{ obj.name }}
 					</span>
 				</td>
 				<td class="actionColumn">
@@ -31,6 +31,7 @@
 				</td>
 			</tr>
 		</tbody>
+		{{ stationData }}
 	</table>
 </template>
 
@@ -45,9 +46,9 @@ export default {
 		ActionButton,
 	},
 	props: {
-		stationName: {
+		stationData: {
 			type: String,
-			required: true,
+			default: '',
 		},
 		stationIsfav: {
 			type: Boolean,