Aissa El Ouafi Aissa El Ouafi - 5 months ago 14
jQuery Question

Retrieve table input values using Angular JS

I have a table with an input field and two clickable image, I want to retrieve the array values from this table using Angular JS.

feedback.html

<table class="display table" id="logTable">
<thead>
<tr>
<th>Message</th>
<th>Score</th>
<th>Tags</th>
</tr>
</thead>

<tbody>
<tr ng-repeat="log in logProd">
<td>{{ log.message }}</td>
<td class="score_tag">
<div ng-click="onClick('1', log.message, log.tags)"><img src="../../images/buttons/like-icon.png"></div>
<div ng-click="onClick('0', log.message, log.tags)"><img src="../../images/buttons/dislike-icon.png"></div>
</td>
<td>
<input type="text" class="form-control" ng-model="log.tags" placeholder="Tags">
</td>
</tr>
</tbody>
</table>


controller.js

var app = angular.module('logAnalysisApp', []);
app.controller('logFeedbackController', function($scope) {
$scope.logProd = [{
message : 'test',
},
{
message : 'test2',
},
{
message : 'test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3',
}];

$scope.onClick = function onClick(option,message,tags){
console.log(option);
console.log(message);
console.log(tags);
};

$scope.update = function(){
console.log("update the model");
var entries = [];
angular.forEach($('#logTable').children()[1].children, function(tr){
//$('#like').css('opacity',0.5);
var entry = [];
angular.forEach(tr.children,function(td){
entry.push(td.innerHTML);
});
entries.push(entry);
})
console.log(entries);
};

$scope.loadEvents = function(eventsNumber){
console.log("load events");
console.log(eventsNumber)
}
});


My table has the following structure :

enter image description here

If the user click on the like image for the first message and dislike the second and the third one, I want to get the following JSON object :

'message':{
'0' :
{
'message' : 'test',
'score' : 1,
'tags' : 'Tag 1'
},
'1':
{
'message' : 'test 2',
'score' : 0,
'tags' : 'Tag 2'
},
'2':
{
'message' : 'test3 test3 test3 test3 test3',
'score' : 0,
'tags' : 'Tag 3'
}
}

Answer

Try changing you HTML to this:

<td>{{ log.message }}</td>
<td class="score_tag">
  <div ng-click="log.score = 1"><img src="../../images/buttons/like-icon.png"></div>
  <div ng-click="log.score = 0"><img src="../../images/buttons/dislike-icon.png"></div>
</td>
<td>
  <input type="text" class="form-control" ng-model="log.tags" placeholder="Tags">
</td>

Then you can make the desired object like this:

JavaScript

var message = {};
for(var i = 0; i < $scope.logProd.length; i++) {
  var log = $scope.logProd[i];
  message[i] = {
    message: log.message,
    score: log.score,
    tags: log.tags
  };
}

Example output:

var logProd = [
    {
    'message': 'test',
    'score': 1,
    'tags': 'Tag 1'
  },
  {
    'message': 'test 2',
    'score': 0,
    'tags': 'Tag 2'
  },
  {
    'message': 'test3 test3 test3 test3 test3',
    'score': 0,
    'tags': 'Tag 3'
  }
]

var message = {};
for(var i = 0; i < logProd.length; i++) {
  var log = logProd[i];
  message[i] = {
    message: log.message,
    score: log.score,
    tags: log.tags
  };
}

console.log(JSON.stringify(message, null, 2));
//Gives this result:
{
  "0": {
    "message": "test",
    "score": 1,
    "tags": "Tag 1"
  },
  "1": {
    "message": "test 2",
    "score": 0,
    "tags": "Tag 2"
  },
  "2": {
    "message": "test3 test3 test3 test3 test3",
    "score": 0,
    "tags": "Tag 3"
  }
}