javascript - Angular ng-repeat not working spotify app -
ng-repeat not seem work
app.js
var app = angular.module('angularjs-starter', ['jsonservice', 'ngroute', 'ngresource']) app.controller('mainctrl', function($scope, jsonservice) { //jsonservice.get(function(data) { // $scope.name = data.artists.href; // $scope.children = data.artists.items; //}); $scope.searchshow = () => { jsonservice.search.query({ show: $scope.showname }, (response) => { console.log(response); // $scope.name = response.artists.href; $scope.children = response; }) } $scope.showdetails = (id) => { console.log(id); jsonservice.detail.get({ details: id }, (response) => { console.log(response.items); // $scope.name = response.artists.href; $scope.details = response.items; }) } }); app.config(['$locationprovider', function($locationprovider) { $locationprovider.hashprefix('') }]) app.config(['$routeprovider', '$locationprovider', function($routeprovider, $locationprovider) { $routeprovider .when('/', { templateurl: 'views/search.html', controller: 'mainctrl' }) .when('/details', { templateurl: 'views/details.html', controller: 'mainctrl' }) .otherwise({ redirectto: '/' }) }]) i have 2 views .a search views search artist name , detail view provides detail.i able parse data search views , display result.i not able display result details views
search.html
<div class="search-header"> <div class="container"> <div class="row"> <div class="col-md-12"> <form> <h2 class="v-center">search</h2> <p class="lead">api search-you can search artist,albums,tracks</p> <div class="input-group"> <input type="text" ng-model="showname" class="form-control input-md" /> <span class="input-group-btn"> <button type="button" class="btn btn-md btn-warning pull-right" ng-click="searchshow()">search</button> </span> </div> </form> <div ng-if="children" class="results-block"> <div ng-repeat="child in children"> <div class="row"> <div class="col-md-3"> <img class=images ng-src="{{child.images[0].url}}" onerror="this.src='./placeholder.png'" /> </div> <div class="row"> <div class="col-md-8"> <ul class="list-group"> <li class="list-group-item"><b>name</b>: {{child.name }}</li> <li class="list-group-item"><b>type</b>: {{child.type}}</li> <li class="list-group-item"><b>popularity</b>: {{child.popularity}}</li> <li class="list-group-item"> <button type="button" class="btn btn-link" ng-click="showdetails(child.id)"><a href="#details">details</a></button></li> </ul> </div> </div> </div> </div> <hr> <hr> </div> </div> </div> </div> </div> details
<div ng-repeat="detail in details"> <div class="row"> <div class="col-md-3"> <img class=images ng-src="{{detail.images[0].url}}" onerror="this.src='./placeholder.png'" /> </div> <div class="row"> <div class="col-md-8"> <hello></hello> <ul class="list-group"> <li class="list-group-item"><b>name</b>: {{detail.name }}</li> <li class="list-group-item"><b>type</b>: {{detail.type}}</li> <li class="list-group-item"><b>href</b>: {{detail.href}}</li> <li class="list-group-item"> <button type="button" class="btn btn-link"><a href="#">back</a></button></li> </ul> </div> </div> </div> </div> <hr> <hr> app.js edited
var app = angular.module('angularjs-starter', ['jsonservice', 'ngroute', 'ngresource']) app.controller('mainctrl', function($scope, jsonservice) { //jsonservice.get(function(data) { // $scope.name = data.artists.href; // $scope.children = data.artists.items; //}); $scope.searchshow = () => { jsonservice.search.query({ show: $scope.showname }, (response) => { console.log(response); // $scope.name = response.artists.href; $scope.children = response; }) } $scope.showdetails = (id) => { console.log(id); jsonservice.detail.get({ details: id }, (response) => { // console.log(response.data); // $scope.name = response.artists.href; $scope.details = response.data; }) } }); app.controller('detailctrl', function($scope, $http, $routeparams) { var id = $routeparams.id; console.log("detail controller" + id); jsonservice.detail.get({ details: id }, (response) => { //console.log(response.data); $scope.details = response.data; }) }); app.config(['$locationprovider', function($locationprovider) { $locationprovider.hashprefix('') }]) app.config(['$routeprovider', '$locationprovider', function($routeprovider, $locationprovider) { $routeprovider .when('/', { templateurl: 'views/search.html', controller: 'mainctrl' }) .when('/details', { templateurl: 'views/details.html', controller: 'mainctrl' }) .when('/details/:id', { templateurl: 'views/details.html', controller: 'detailctrl' }) .otherwise({ redirectto: '/' }) }]) service.js
angular.module('jsonservice', ['ngresource']) .factory('jsonservice', function($resource) { return { search: $resource('/api/search'), detail: $resource('/api/details') } }); routes.js-using node js
const express = require('express'), path = require('path'), router = express.router(), superagent = require('superagent') module.exports = () => { router.get('/api/search', (req, res) => { const { show } = req.query // same const show = req.query.show console.log(show); superagent .get('https://api.spotify.com/v1/search?q=' + show + ':&type=artist') .end((err, response) => { if (err) { res.send(err); console.log(err); } else { // console.log(response.body.artists.items); res.json(response.body.artists.items); } }) }) router.get('/api/details', (req, res) => { const { details } = req.query // same const show = req.query.show console.log(details); superagent .get('https://api.spotify.com/v1/artists/' + details + '/albums') .end((err, response) => { if (err) { res.send(err); console.log(err); } else { res.json(response.body); // console.log(response.body.items); } }) }) router.get('*', (req, res) => { res.sendfile(path.join(__dirname, '../client/index.html')) }) return router } edit: when tried console log $scope.children returning value $scope.details returns undefined
you can try
<a href="#details/{{child.id}}">details</a> in router
.when("/details/:id", { // } and in ctrl
.controller('mainctrl', function($scope, $http, $routeparams) { var id= $routeparams.id; jsonservice.detail.get({ details: id }, (response) => { console.log(response.data); $scope.details = response.data; })
Comments
Post a Comment