How to get and show additional options from JSON - javascript

I have a nested JSON file that has a few products in it. I'm trying to build a product selection tool. See the JSON file here: http://www.mocky.io/v2/5b1f5423310000570023077f
What I'm trying to do is "drill down" or show all the options for each of the products when clicked. So each product has 2 variations. Item 1 has 2 options. Item 2 has 3 options. I just want to show each of the respective items options when I click on their names.
Here's a demo of what I have so far: https://plnkr.co/edit/kZsOjjFaEZDKCGGiBYFS?p=preview
HTML:
<body ng-app="rac" ng-controller="prodCtrl">
<div class="row">
<div class="container">
<div ng-controller="prodCtrl">
<h3>Please choose a product</h3>
<ul>
<li ng-repeat="product in products">
<a href ng-click='setSelectedProduct(product)'>{{product.name}}</a>
</li>
</li>
</ul>
<!-- This section will automatically display detail when selectedProduct is updated -->
<div class="detail">
<div class="detailimagewrapper">
<ul>
<li ng-repeat="product in setSelectedProduct(product)">
<a href ng-click='setSelectedProduct(product)'>
{{product.name}}</a></li>
</li>
</ul>
<img class="detailimage" src="{{product.image}}" >
</div>
<p>{{selectedProduct.description}}</p>
Order Now
</div>
</div>
</div>
</div>
Here's my JS:
var rac = angular.module('rac', ['angular.filter']);
rac.controller('prodCtrl', function($scope, $http, $sce, $filter) {
$http.jsonp($sce.trustAsResourceUrl(
"http://www.mocky.io/v2/5b1f5423310000570023077f"), {
jsonpCallbackParam: 'callback'
})
.then(function(data) {
$scope.products = data.data.products;
},
function(error) {});
$scope.setSelectedProduct = function($scope) {
console.log($scope);
if ($scope.options.image) {
$scope.selectedProductImage = product.options.image;
}
};
});

It's slightly messy, but I think what you want is nested ng-repeat, that access the data after one product was selected. I decided not to make it pretty and just pull it out as is. For that I used two ng-repeat, one for selected options, the other is for the key and values of the objects.
Here is a demo:
var rac = angular.module('rac', ['angular.filter']);
rac.controller('prodCtrl', function($scope, $http, $sce, $filter) {
$http.jsonp($sce.trustAsResourceUrl("https://www.mocky.io/v2/5b1f5423310000570023077f"), {
jsonpCallbackParam: 'callback'
})
.then(function(data) {
$scope.products = data.data.products;
},
function(error) {}
);
$scope.selected = null;
$scope.setSelectedProduct = function(product) {
$scope.selected = product;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.js"></script>
</head>
<body ng-app="rac" ng-controller="prodCtrl">
<div class="row">
<div class="container">
<div ng-controller="prodCtrl">
<h3>Please choose a product</h3>
<ul>
<li ng-repeat="product in products">
<a href ng-click='setSelectedProduct(product)'>
{{product.name}}
</a>
</li>
</ul>
<hr>
<!-- This section will automatically display detail when selectedProduct is updated -->
<div class="detail">
<div class="detailimagewrapper">
<ul ng-repeat="s in selected.options">
<li ng-repeat="(key, value) in s">
<!-- Make this as pretty as you want -->
<span ng-if="key!='image'">{{key}}: {{value}}</span>
<span ng-if="key=='image'"><img style="width:100px" ng-src="{{value}}"></span>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Related

Why is only some of the JSON data posting to the DOM rather than all of it?

I'm trying to get JSON data to post to the DOM using ng-repeat with AngularJS. It works, but not for everything. Only random pieces of data are getting posted. I'm assuming the issue is with what I have in the ng-repeat. What am I doing wrong?
Here's what it looks like:
You can see how some of the sections come out blank.
Here's what the data looks like when I log it to the console:
here's my html:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://dogdatabase-d31f.restdb.io/rest/_jsapi.js"></script>
</head>
<div ng-app="app" style="margin:45px;" ng-controller="ctrl as $ctrl">
<ul>
<li class="list" style="list-style:none;" ng-repeat="dog in $ctrl.dogs"><strong>{{dog.breed}}</strong>
<br>
Description: <span ng-repeat="description in dog.description">{{description}}</span>
<br>
Size: <span ng-repeat="size in dog.size" style="color:blue;">{{size}}</span>
<br>
Lifespan: <span ng-repeat="lifespan in dog.lifespan" style="color:green;">{{lifespan}}</span>
<br><br>
</li>
</ul>
</div>
<script type='text/javascript' src='dogapp.js'></script>
</body>
</html>
and here's the JS file:
angular.module('app', [])
.service('dogsService', function($http) {
var service = {};
service.getDogs = function() {
return $http.get('https://dogdatabase-d31f.restdb.io/rest/dogs', {headers: {
'x-apikey': 'xxxxxxxxxxxxxxxxxxxxxxx'
}
}).then(response => response.data);
};
return service;
})
.controller('ctrl', function(dogsService) {
var _this = this;
this.dogs = [];
dogsService.getDogs().then((data) => {
_this.dogs = data;
}).catch((error) => {
console.error(error);
});
});
I think this should work now
<li class="list" style="list-style:none;" ng-repeat="dog in $ctrl.dogs"><strong>{{dog.breed}}</strong>
<br>
Description: <span>{{dog.description}}</span>
<br>
Size: <span style="color:blue;">{{dog.size}}</span>
<br>
Lifespan: <span style="color:green;">{{dog.lifespan}}</span>
<br><br>
</li>

how to get data in ng dialog angularjs using http method?

Getting Data from database with php. Data is fine. Butt data is not showing in NgModel box. I have passed scope parameter in ngdialog function. Please help me out.
var adminapp = angular.module("uibootstrap", ["ngRoute", 'ngDialog']);
adminapp.controller("homedata", function($scope, $rootScope, $http, $httpParamSerializerJQLike, ngDialog, $timeout) {
$rootScope.theme = 'ngdialog-theme-default';
$scope.openDefault = function() {
ngDialog.open({
template: 'firstDialogId',
className: 'ngdialog-theme-default',
scope: $scope
})
};
// get user
$http.get('http://localhost/database/get-user.php').success(function(response) {
$scope.users = response;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li ng-repeat="item in users">
<a href="javascript:void(0);" ng-click="openDefault()">
<div class="img"><img alt="" src="admin/images/user-img2.jpg"> <span class="status-red"></span></div>
<div class="msginfo">
{{item.user_name}} <br> <span>{{item.user_status}}</span>
</div>
</a>
<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message">
<div class="data">
<div class="img">
<img alt="" src="http://localhost/rockeditor/admin/images/img-user.png"> <a class="editbtn" href="#"><i class="fa fa-edit"></i></a>
</div>
<div class="name">{{item.user_name}}</div>
<span class="editor">{{item.user_status}}</span>
<span class="email">{{item.user_email}}</span>
<input class="btn-green" type="submit" value="Save">
</div>
</div>
</script>
</li>
variable item is not available in your template firstDialogId, actually it's not a child node of <li></li>
You forget to include controller in your html.
Use ng-controller="homedata" on <li> element
item is not accessible in that script tag
$scope.users is available after $http call returned with success response
See here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ngDialog.css" />
<link rel="stylesheet" href="ngDialog-theme-default.css" />
<script data-require="angular.js#*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="ngDialog.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="MyApp" ng-controller="homedata">
<button ng-click="clickme()">Hello World</button>
<script type="text/ng-template" id="firstDialogId">
<div ng-repeat="user in users">
<div>Current user:</div>
<div>{{user.name}}</div>
</div>
</script>
</body>
</html>
script.js
// Code goes here
angular.module("MyApp", ['ngDialog'])
.controller("homedata", homedata)
function Main($scope, ngDialog) {
$scope.users = [
{name: 'abc'},
{name: 'xyz'}
];
$scope.clickme = function() {
ngDialog.open({
template: 'firstDialogId',
className: 'ngdialog-theme-default',
scope: $scope
});
};
}
But as per your controller, There is a $http call and until it responded you don't have any data in $scope.users. So, please make sure that it and you only get data in your dialog after the $http is get success response

$http GET not showing in display in AngularJS

I am creating an app in AngularJS, where I am grabbing the data from the backend to display on the view. But, for some reason, I am getting the data in my console but not in my view. I will be so thankful if any one can help me solve this. Thanks in advance.
Here is my code. -Services
app.factory('user', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://************/*****/**/***********')
}
};
return userInfo;
}]);
home page(view)
<div class="users" ng-repeat="user in users | filter:userSearch" >
<a href="#/users/{{ user.id }}">
<img ng-src="{{user.img}}"/>
<span class="name">{{user.first}} </span>
<span class="name">{{user.last}} </span>
<p class="title">{{user.title}} </p>
<span class="date">{{user.date}} </span>
</a>
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, user, $http) {
if (!isConfirmed) {
user.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/users';
}
});
index.html
<!doctype html>
<html ng-app="Portal">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<div class="container">
<h3>Portal</h3>
</div>
</div>
<div class="main">
<div class="container">
<div ng-view>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/UserController.js"></script>
<!-- Services -->
<script src="js/services/users.js"></script>
</body>
</html>
change your ng-repeat="user in users" to ng-repeat="user in userInfo"
as your assigning and consoling only $scope.userInfo in your controller
The property you assign data has to be same as of binded to view.
As per your HTML data should be in users. So do it like : $scope.users = response.data;.
or if you assign data to userInfo, then bind it on html. like :
<div class="users" ng-repeat="user in userInfo | filter:userSearch" >

array data is not visible to li tag when pushed in angular

I'm new to angularjs. I'm trying to create a to do list app. The problem i'm facing is when i push the data to the object, the data is being displayed in the console but not the web page. I"m using materialize css framework as well. Here is my html code.
<head>
<title>Shamanager</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bower_components/materialize/bin/materialize.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="container" ng-controller="tasks">
<h3 class="center-align"><i>Hola! Sham</i></h3>
<form class="row" ng-submit="enter()" novalidate>
<div class="col s12">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" ng-repeat="thing in lists">
<i class="material-icons">filter_drama</i>
</div>
</li>
<li>
<div class="collapsible-header">
<input type="text" placeholder="Enter task" class="input-field center-align" ng-model="name" type="submit">
</div>
</li>
</ul>
</div>
</form>
</div ng-submit="">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="bower_components/materialize/bin/materialize.js"></script>
</body>
</html>
And here is my javascript code.
angular.module('manager', [])
.controller('tasks', function($scope) {
$scope.lists = [
]
$scope.name = '';
$scope.enter = function() {
console.log('hello world');
$scope.lists.push($scope.name);
console.log($scope.name);
$scope.name = '';
}
})
Okay it seems to me that you have a lot of unclear knowledge about HTML in the first place and of Angular in the second place.
Some errors I spotted:
You have a form with
Your input field on the form has multiple type attributes but it would only need type="text"
You are using ng-submit on strange places ( but it would be enough on the form)
There is no way for displaying the data in the ng-repeat over lists. You need to display the items with ยด{{ thing }}`, for example:
<ul>
<li ng-repeat="listItem in lists">{{ listItem }}</li>
</ul>
Overall I would really recommend you to study some examples like this ones to become more familiar with the way angular should work:
https://codepen.io/Russbrown/pen/IgBuh
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_todo_app
https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
Here is also a quite good tutorial on what you want to achieve:
https://www.youtube.com/watch?v=1STpbC44bRA
Hope it helps.

Angular JS ng-repeat not working as expected

I have a controller like this:
controller('BreadCrumbs', ['$scope','crumble','$rootScope', function ($scope,crumble,$rootScope) {
function init (){
$scope.ui={};
$scope.ui.mdBreadCrumbs=[{"path":"path1","label":"label1"}];
$rootScope.oldScope=$scope;
}
$scope.setBreadCrumbs=function() {
$scope.ui.mdBreadCrumbs=crumble.trail;
}
init();
}]);
and in HTML,
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
{{ui.mdBreadCrumbs}} is showing some like [{"path":"path1","label":"label1"}].
But in ng-repeat, it is not iterating.
Using $scope.setBreadCrumbs I put some more values, but still ngRepeat not working.
Anyone have any idea why it is not working?
Change
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
to
<ol id="breadCrumbList" ng-controller="BreadCrumbs">
DEMO
var app = angular.module('app', []);
app.controller('BreadCrumbs', ['$scope', function($scope) {
$scope.ui = {};
$scope.ui.mdBreadCrumbs = [{
"path": "path1",
"label": "label1"
}];
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="app" ng-controller="BreadCrumbs">
<ol id="breadCrumbList">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
<script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
<script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>
You have to change something in your HTML and your HTML should be like this:
<div ng-app>
<div ng-controller="BreadCrumbs">
<div ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</div>
</div>
</div>

Categories