Would anyone be able to tell me why ng-repeat is not working for me? If ng-repeat problem in jsonFile it prints to table but ng-repeat problem in problems does NOT print to table. The JSON is normally pulled in from a local directory but for codepen added a small JSON as a variable.
NOTE: Yes changing the variable $scope.jsonFile to $scope.problems works. that is not my issue. My issue is once you parse through with the user input and try to display the data back out it does not work. console.log() on both the original json and parsed json look identical. That is my issue.
Inspect Source Both $scopes are printed to console.
https://codepen.io/dneverson/pen/BvLyqW
main.js
let app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope, $http){
// #################### GLOBALS ####################
$scope.logTime = {};
// #################### FUNCTIONS ##################
//GET JSON FILE
$http.get('./data/Problems2.json').then(function(response) {
$scope.jsonFile = response.data;
console.log($scope.jsonFile);
});
// Shows or Hides button by Class ID
$scope.displayButtons = function(classID){
$(document).on('mouseenter', classID, function () {
$(this).find(":button").show();
}).on('mouseleave', classID, function () {
$(this).find(":button").hide();
});
};
// Hides an element by ID
$scope.hideElement = function(elementID){
document.getElementById(elementID).style.display = "none";
};
// Shows an element by ID
$scope.showElement = function(elementID){
document.getElementById(elementID).style.display = "block";
};
// Clears an element by ID
$scope.clearElement = function(elementID){
document.getElementById(elementID).innerHTML = "";
};
// Replaces element string by ID with given searchText
$scope.addToElement = function(elementID, str){
document.getElementById(elementID).innerHTML = str;
};
// Start time
$scope.startTime = function(){
$scope.logTime.start = Date.now();
}
// End time
$scope.stopTime = function(){
$scope.logTime.end = Date.now() - $scope.logTime.start;
$scope.logTime.start = 0;
}
// Print timed results in console
$scope.printTime = function(){
if($scope.problems.length){
console.log("Time: " + $scope.logTime.end +
"ms, Results: " + $scope.problems.length +
", Records: " + $scope.jsonFile.length);
};
}
//Add problem to Patients
$scope.addProblem = function(data){
var currDate = new Date();
console.log(data);
//_mel.melFunc('{MEL_ADD_PROBLEM("", ' + data.Description + ' , "", ' + currDate + ',"", "")}');
};
// Needed for searchJSON function
$scope.addSlashes = function(str){
return (str + '').replace(/[\\"'\(\)]/g, '\\$&').replace(/\u0000/g, '\\0');
}
// Searches JSON string for searchString
$scope.searchJSON = function(searchStr){
$scope.problems = [];
return new Promise((resolve, reject) => {
//console.log("jsonFile: " + typeof $scope.jsonFile + " content: " + $scope.jsonFile); //NOTE: [object Object],[object Object] WTF!!! on line 14 it is [{...},{...},{...},...]
searchStr = $scope.addSlashes(searchStr).replace(' ', '[^"]+');
let jsonStr = JSON.stringify($scope.jsonFile, null, ' '); // , null, ' '
let found = jsonStr.match(
new RegExp('{\\s+"id":\\s"\\w+",\\s+"description":\\s.*'
+ searchStr + '.*",\\s+"weight":\\s[\\d\\.]+\\s+}','gi')
);
if (found){
found.forEach((i) => {
// let tmp = JSON.stringify(i).replace(/\\n/g,'').replace(/\s\\/g,'').replace(/\\/g,'').replace(/"{\s/g,'{').replace(/\s}"/g,'}').replace(/,\s"/g,',"').replace(/:\s/g,':');
$scope.problems.push(JSON.parse(i));
});
}
resolve();
});
};
// ################## CALL FUNCTIONS ################
$scope.displayButtons(".tblRow");
$scope.addToElement("error", "Type in the search bar for results.");
document.getElementById("searchText").focus();
$scope.showElement("searchTable");
$("#searchText").on("paste keyup", function() { //"change paste keyup"
if( $("#searchText").val().length >= 1){
$scope.startTime();
$scope.clearElement("error");
$scope.showElement("searchTable");
let searchText = $("#searchText").val().toLowerCase();
$scope.searchJSON(searchText).then(console.log($scope.problems)); //Leaving promise in for future
$scope.stopTime();
$scope.printTime();
if($scope.problems.length == 0){
//$scope.hideElement("searchTable");
$scope.addToElement("error", "No results containing all your search terms were found.");
}
}else{
//$scope.hideElement("searchTable");
$scope.addToElement("error", "Type in the search bar for results.");
};
});
});
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>HHS - Problems</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="scripts/bundle.public.min.js" type="text/javascript"></script>-->
<!--<script src="scripts/DemoController.js" type="text/javascript"></script>-->
<script src="js/main.js"></script>
</head>
<body ng-controller="MyCtrl">
<!-- Search Bar-->
<div class="container well has-feedback search">
<input type="text" class="form-control" id="searchText" placeholder="Search" autocomplete="off"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<!-- Error Messages for User-->
<div class="container">
<div id="error"></div>
</div>
<!-- Search Results Table-->
<div class="container well" id="searchTable" style="display:none;">
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Weight</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="tblRow" ng-repeat="problem in jsonFile | orderBy:'-Weight' track by $index" ng-class="{'color-grey': problem.Weight === 0, 'color-blue': problem.Weight <= 1 && problem.Weight > 0 , 'color-green': problem.Weight >= 1}">
<td>{{problem.ID}}</td>
<td>{{problem.Description}}</td>
<td>{{problem.Weight}}</td>
<td class="rowbtn"><button class="btn btn-success" ng-click="addProblem(problem)" style="display:none;">Add</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
main.css
h2{
text-align: center;
}
#error{
font-weight: bold;
color: red;
}
.search{
background-color: #00426c;
margin-bottom: 0px;
box-shadow: 0px 0px 50px #dadada;
}
.well{
box-shadow: 0px 0px 50px #dadada;
}
.rowbtn{
padding: 0 !important;
width: 52px;
}
.form-control-feedback{
top: 20px !important;
right: 20px !important;
}
.glyphicon-search{
color: #003152;
}
.color-red{
color: red;
}
.color-blue{
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.color-green{
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.color-grey{
color: #989898;
background-color: #f1f1f1;
border-color: #eaeaea;
}
.color-yellow{
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
Problems2.json
[
{"ID": "A0103","Description": "Typhoid pneumonia","Weight": 0.205},
{"ID": "A0104","Description": "Typhoid arthritis","Weight": 0.51},
{"ID": "A0105","Description": "Typhoid osteomyelitis","Weight": 0.51},
{"ID": "A021","Description": "Salmonella sepsis","Weight": 0.548},
{"ID": "A0222","Description": "Salmonella pneumonia","Weight": 0.205},
{"ID": "A0223","Description": "Salmonella arthritis","Weight": 0.51},
{"ID": "A0224","Description": "Salmonella osteomyelitis","Weight": 0.51},
{"ID": "A065","Description": "Amebic lung abscess","Weight": 0.205},
{"ID": "A072","Description": "Cryptosporidiosis","Weight": 0.451},
{"ID": "A202","Description": "Pneumonic plague","Weight": 0.205},
{"ID": "A207","Description": "Septicemic plague","Weight": 0.548},
{"ID": "A212","Description": "Pulmonary tularemia","Weight": 0.205},
{"ID": "A221","Description": "Pulmonary anthrax","Weight": 0.205},
{"ID": "A227","Description": "Anthrax sepsis","Weight": 0.548},
{"ID": "A267","Description": "Erysipelothrix sepsis","Weight": 0.548},
{"ID": "A310","Description": "Pulmonary mycobacterial infection","Weight": 0.451},
{"ID": "A312","Description": "Disseminated mycobacterium avium-intracellulare complex (DMAC)","Weight": 0.451},
{"ID": "A327","Description": "Listerial sepsis","Weight": 0.548},
{"ID": "A3681","Description": "Diphtheritic cardiomyopathy","Weight": 0.377},
{"ID": "A3684","Description": "Diphtheritic tubulo-interstitial nephropathy","Weight": 0},
{"ID": "A391","Description": "Waterhouse-Friderichsen syndrome","Weight": 0.251},
{"ID": "A392","Description": "Acute meningococcemia","Weight": 0.548},
{"ID": "A393","Description": "Chronic meningococcemia","Weight": 0.548},
{"ID": "A394","Description": "Meningococcemia, unspecified","Weight": 0.548},
{"ID": "A3983","Description": "Meningococcal arthritis","Weight": 0.51},
{"ID": "A3984","Description": "Postmeningococcal arthritis","Weight": 0.51},
{"ID": "A400","Description": "Sepsis due to streptococcus, group A","Weight": 0.548},
{"ID": "A401","Description": "Sepsis due to streptococcus, group B","Weight": 0.548},
{"ID": "A403","Description": "Sepsis due to Streptococcus pneumoniae","Weight": 0.548},
{"ID": "A408","Description": "Other streptococcal sepsis","Weight": 0.548},
{"ID": "A409","Description": "Streptococcal sepsis, unspecified","Weight": 0.548},
{"ID": "A4101","Description": "Sepsis due to Methicillin susceptible Staphylococcus aureus","Weight": 0.548},
{"ID": "A4102","Description": "Sepsis due to Methicillin resistant Staphylococcus aureus","Weight": 0.548},
{"ID": "A411","Description": "Sepsis due to other specified staphylococcus","Weight": 0.548},
{"ID": "A412","Description": "Sepsis due to unspecified staphylococcus","Weight": 0.548},
{"ID": "A413","Description": "Sepsis due to Hemophilus influenzae","Weight": 0.548},
{"ID": "A414","Description": "Sepsis due to anaerobes","Weight": 0.548},
{"ID": "A4150","Description": "Gram-negative sepsis, unspecified","Weight": 0.548},
{"ID": "A4151","Description": "Sepsis due to Escherichia coli [E. coli]","Weight": 0.548},
{"ID": "A4152","Description": "Sepsis due to Pseudomonas","Weight": 0.548},
{"ID": "A4153","Description": "Sepsis due to Serratia","Weight": 0.548},
{"ID": "A4159","Description": "Other Gram-negative sepsis","Weight": 0.548},
{"ID": "A4181","Description": "Sepsis due to Enterococcus","Weight": 0.548},
{"ID": "A4189","Description": "Other specified sepsis","Weight": 0.548},
{"ID": "A419","Description": "Sepsis, unspecified organism","Weight": 0.548},
{"ID": "A420","Description": "Pulmonary actinomycosis","Weight": 0.205},
{"ID": "A427","Description": "Actinomycotic sepsis","Weight": 0.548},
{"ID": "A430","Description": "Pulmonary nocardiosis","Weight": 0.205},
{"ID": "A480","Description": "Gas gangrene","Weight": 1.449},
{"ID": "A481","Description": "Legionnaires' disease","Weight": 0.689},
{"ID": "A483","Description": "Toxic shock syndrome","Weight": 0.548},
{"ID": "A5055","Description": "Late congenital syphilitic arthropathy","Weight": 0.51},
{"ID": "A5204","Description": "Syphilitic cerebral arteritis","Weight": 0},
{"ID": "A5440","Description": "Gonococcal infection of musculoskeletal system, unspecified","Weight": 0.51},
{"ID": "A5441","Description": "Gonococcal spondylopathy","Weight": 0.51},
{"ID": "A5442","Description": "Gonococcal arthritis","Weight": 0.51},
{"ID": "A5443","Description": "Gonococcal osteomyelitis","Weight": 0.51},
{"ID": "A5449","Description": "Gonococcal infection of other musculoskeletal tissue","Weight": 0.51},
{"ID": "A5484","Description": "Gonococcal pneumonia","Weight": 0.205},
{"ID": "A5485","Description": "Gonococcal peritonitis","Weight": 0.318},
{"ID": "A5486","Description": "Gonococcal sepsis","Weight": 0.548},
{"ID": "A666","Description": "Bone and joint lesions of yaws","Weight": 0.51},
{"ID": "A6923","Description": "Arthritis due to Lyme disease","Weight": 0.51},
{"ID": "A8100","Description": "Creutzfeldt-Jakob disease, unspecified","Weight": 0},
{"ID": "A8101","Description": "Variant Creutzfeldt-Jakob disease","Weight": 0},
{"ID": "A8109","Description": "Other Creutzfeldt-Jakob disease","Weight": 0},
{"ID": "A811","Description": "Subacute sclerosing panencephalitis","Weight": 0},
{"ID": "A812","Description": "Progressive multifocal leukoencephalopathy","Weight": 0},
{"ID": "A8181","Description": "Kuru","Weight": 0},
{"ID": "A8182","Description": "Gerstmann-Straussler-Scheinker syndrome","Weight": 0},
{"ID": "A8183","Description": "Fatal familial insomnia","Weight": 0},
{"ID": "A8189","Description": "Other atypical virus infections of central nervous system","Weight": 0},
{"ID": "A819","Description": "Atypical virus infection of central nervous system, unspecified","Weight": 0},
{"ID": "A985","Description": "Hemorrhagic fever with renal syndrome","Weight": 0},
{"ID": "B007","Description": "Disseminated herpesviral disease","Weight": 0.548},
{"ID": "B0082","Description": "Herpes simplex myelitis","Weight": 0.522},
{"ID": "B0112","Description": "Varicella myelitis","Weight": 0.522},
{"ID": "B0221","Description": "Postherpetic geniculate ganglionitis","Weight": 0},
{"ID": "B0222","Description": "Postherpetic trigeminal neuralgia","Weight": 0},
{"ID": "B0223","Description": "Postherpetic polyneuropathy","Weight": 0},
{"ID": "B0224","Description": "Postherpetic myelitis","Weight": 0.522},
{"ID": "B0229","Description": "Other postherpetic nervous system involvement","Weight": 0},
{"ID": "B0682","Description": "Rubella arthritis","Weight": 0.51},
{"ID": "B180","Description": "Chronic viral hepatitis B with delta-agent","Weight": 0.257},
{"ID": "B181","Description": "Chronic viral hepatitis B without delta-agent","Weight": 0.257},
{"ID": "B182","Description": "Chronic viral hepatitis C","Weight": 0.257},
{"ID": "B188","Description": "Other chronic viral hepatitis","Weight": 0.257},
{"ID": "B189","Description": "Chronic viral hepatitis, unspecified","Weight": 0.257},
{"ID": "B20","Description": "Human immunodeficiency virus [HIV] disease","Weight": 0.482},
{"ID": "B250","Description": "Cytomegaloviral pneumonitis","Weight": 0.451},
{"ID": "B251","Description": "Cytomegaloviral hepatitis","Weight": 0.451},
{"ID": "B252","Description": "Cytomegaloviral pancreatitis","Weight": 0.451},
{"ID": "B258","Description": "Other cytomegaloviral diseases","Weight": 0.451},
{"ID": "B259","Description": "Cytomegaloviral disease, unspecified","Weight": 0.451},
{"ID": "B2685","Description": "Mumps arthritis","Weight": 0.51},
{"ID": "B3324","Description": "Viral cardiomyopathy","Weight": 0.377},
{"ID": "B371","Description": "Pulmonary candidiasis","Weight": 0.451},
{"ID": "B377","Description": "Candidal sepsis","Weight": 0.548},
{"ID": "B377","Description": "Candidal sepsis","Weight": 0.451},
{"ID": "B3781","Description": "Candidal esophagitis","Weight": 0.451},
{"ID": "B380","Description": "Acute pulmonary coccidioidomycosis","Weight": 0.205},
{"ID": "B381","Description": "Chronic pulmonary coccidioidomycosis","Weight": 0.205},
{"ID": "B382","Description": "Pulmonary coccidioidomycosis, unspecified","Weight": 0.205},
{"ID": "B390","Description": "Acute pulmonary histoplasmosis capsulati","Weight": 0.205},
{"ID": "B391","Description": "Chronic pulmonary histoplasmosis capsulati","Weight": 0.205},
{"ID": "B392","Description": "Pulmonary histoplasmosis capsulati, unspecified","Weight": 0.205},
{"ID": "B400","Description": "Acute pulmonary blastomycosis","Weight": 0.205},
{"ID": "B401","Description": "Chronic pulmonary blastomycosis","Weight": 0.205},
{"ID": "B402","Description": "Pulmonary blastomycosis, unspecified","Weight": 0.205},
{"ID": "B410","Description": "Pulmonary paracoccidioidomycosis","Weight": 0.205},
{"ID": "B4282","Description": "Sporotrichosis arthritis","Weight": 0.51},
{"ID": "B440","Description": "Invasive pulmonary aspergillosis","Weight": 0.451},
{"ID": "B441","Description": "Other pulmonary aspergillosis","Weight": 0.451},
{"ID": "B442","Description": "Tonsillar aspergillosis","Weight": 0.451},
{"ID": "B447","Description": "Disseminated aspergillosis","Weight": 0.451},
{"ID": "B4481","Description": "Allergic bronchopulmonary aspergillosis","Weight": 0.281},
{"ID": "B4489","Description": "Other forms of aspergillosis","Weight": 0.451},
{"ID": "B449","Description": "Aspergillosis, unspecified","Weight": 0.451},
{"ID": "B450","Description": "Pulmonary cryptococcosis","Weight": 0.451},
{"ID": "C6300","Description": "Malignant neoplasm of unspecified epididymis","Weight": 0.158}
]
I have to say that this is an odd way to do it, but the issue is that you are loading up $scope.problems outside of Angular's digest cycle. Because of this Angular doesn't know to inform the view to update so you never see the search results even though you can console.log($scope.problems) and see that it does indeed have a collection of values. To resolve this without altering the structure you have created you'll need to wrap the portion of code where you push values onto $scope.problems in a $scope.$apply() block. Within your $scope.searchJSON() function make this modification to notify Angular that you have modified the $scope.problems collection and then the search results will show up in your view:
if (found) {
$scope.$apply(() => {
found.forEach((i) => {
// let tmp = JSON.stringify(i).replace(/\\n/g,'').replace(/\s\\/g,'').replace(/\\/g,'').replace(/"{\s/g,'{').replace(/\s}"/g,'}').replace(/,\s"/g,',"').replace(/:\s/g,':');
$scope.problems.push(JSON.parse(i));
});
});
}