AngularJS Transfer of Post Data

I am having some trouble getting HTTP Post data to transfer from a PHP database call.  Here are the pieces of code (all of these code pieces are shortened to only show the most critical parts to diagnose):

HTML Part One
This is set up so that a previous selection displays a drop down menu of options that come from a correctly working DB call. When the user hits Submit, it runs the AngularJS call below to do another DB call to request additional data.
                    <p>
                     <select name="devo" ng-model="devo" class="form-control">  
                          <option value="">Select a Devotional</option>  
                          <option ng-repeat="devo in devos" value="{{devo.dvID}}">{{devo.dv_title}}</option>  
                     </select>  
					</p> 
               		<p>
               		    <button type="submit" id="frmsbmt" class="btn btn-primary btn-xl wow tada" ng-disabled="devoFm.$invalid" ng-click="submitDv(devo)">
                                View Devotional<i class="fa fa-sign-in"></i>
                  		</button>
					</p>

Open in new window


HTML Part Two
When the data comes back from the HTTP post call, it then displays in another part of the screen. I am correctly obtaining the data for these fields with the exceptions noted below.
<div ng-repeat="dir in dirct">
      <h4>{{dir.dv_title}}</h4>
      <h1>{{dir.dv_talent}}</h1>
      <p>{{dir.dv_overview}}</p>
</div>

Open in new window


Angular Controller
      $scope.submitDv = function (devo) { 
		  $http.post("direct.php", {'plTpe':'diracc', 'dvID':devo})  
           .success(function(data){ 
                $scope.dirct = data;
			  	console.log(data);
			  	$scope.load = false;
           });
      }

Open in new window


PHP Database Call
The call to the database returns the correct JSON array with data like this (as displayed by console.log for data):
[…]
0: {…}
"$$hashKey": "object:31"
dvID: "15"
dv_file: "w15_SteppingOut(Rothschild) "
dv_overview: "<p>As your relationship with God deepens, He may ask you to go somewhere that doesnt make sense</p>"
dv_photo: "YVwalk3.jpg"
dv_pic: "jennifer-rothschild"
dv_plan: "3"
dv_talent: "Jennifer Rothschild"
dv_title: "Stepping Out"
__proto__: Object { … }
length: 1
__proto__: Array []

Open in new window


HERE ARE MY PROBLEMS


  • It works fine as long as the character count in the field dv_overview is less than around 120 characters. Once over 120 it crashes and doesn't return anything.
  • If the info being return contains HTML formatting characters (e.g. <b>Bold</b> or <p>paragraph</p> tags), they are not correctly converted to but instead are displayed as is.
  • Although the return of data will always be a single record in an array, the only way I can get this data to display is by using a "ng-repeat" (<div ng-repeat="dir in dirct">) to get it to display. Is there an alternative way of displaying?

What do I need to do to fix these problems.

Thank you.
Paul KonstanskiProject SpecialistAsked:
Who is Participating?
 
Paul KonstanskiConnect With a Mentor Project SpecialistAuthor Commented:
Had a co-worker provide some answers.

For bullet #3: $scope.dirct = data[0];  That should get you the first entry in the array and flatten out your data.

For bullet #1: It isn't a 120 character limit, it is that there are some non-standard characters in the way it was saved in the database that are not converting well and are crashing. I need to sanitize those somehow.

Still working on how to pass the HTML via angular. (Bullet #2)
0
 
Paul KonstanskiConnect With a Mentor Project SpecialistAuthor Commented:
For bullet #1: I added this to the php script where it builds the array:

	$arr = array_map('utf8_encode', $dummy);
	$output = array($arr);
        echo json_encode($output); 

Open in new window


Where $dummy is the original array from the database query.  This suggestion came from: https://stackoverflow.com/questions/20694317/json-encode-function-special-characters

For bullet #2, solved this way:
<p ng-bind-html="renderHtml(dir.dv_overview)"></p>

Open in new window

This worked because I already had $sce loaded.
0
 
Paul KonstanskiProject SpecialistAuthor Commented:
An associate provided answers to me in a timely fashion.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.