Develop Reference

How can I split the following string into an array that I can use to populate a html table

I have a string that looks like:
var str = '{ "abc": {
"decline_reason": "Business rule switched off"
},
"def": {
"decline_reason": "No response by interface"
},
"ghi": {
"decline_reason": "Requested incorrect size" }';
I would like to split that string into an array that I can use to populate a table on a webpage. I intend to use the initial reference ('abc'), with the reason ('Business rule switched off') on row 1, initial reference ('def'), with the reason ('No response by interface') on row 2, etc...
I have tried regex to break it down, and I've managed to find one that removes quotes, but not to break the string down.
I intend to populate the table with code like:
<table id="declinesTable">
<tr>
<th onclick="sortTable(0)">Reference Code</th>
<th>Decline Reason</th>
</tr>
<tr id="lender1">
<td id="lender1"><script>document.getElementById("lender1").innerHTML = declines[0];</script>
</td>
<td id="declineReason1"><script>document.getElementById("declineReason1").innerHTML = declines[2];</script>
</td>
</tr>
</table>
skipping out the value "decline_reason" from the table.
Any suggestions?

Couple of things - your string is missing a final }. Not sure where you're getting the string from, but it's in JSON format, so use JSON.parse to get it into an object, then iterate over the object to do something with each individual nested object. I would strongly recommend using a library like jQuery to help you append it to the table. You can google and very quickly find out how to add jQuery to your project. See below.
function stringParse(str) {
const json = JSON.parse(str);
const html = Object.entries(json).reduce((h, [k, v]) =>
h += `<tr><td>${k}</td><td>${v.decline_reason}</td></tr>`
, "");
$('#declinesTable').append(html);
}
const str = '{ "abc": {"decline_reason": "Business rule switched off"},"def": {"decline_reason": "No response by interface"},"ghi": {"decline_reason": "Requested incorrect size"}}'
stringParse(str);
<table id="declinesTable">
<tr>
<th>Reference Code</th>
<th>Decline Reason</th>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Debugging jquery .map that generates html

I'm trying to generate some rows and cells in a given table based on an object's key-value pairs.
As seen in the jQuery below, I'm trying to use .map to do this.
JavaScript object:
response = {
...
'details': {
'Email': employee.email_work,
'Slack': employee.username_slack,
}
}
jQuery:
$.map(response.details, function(key, val) {
$("#details-tbl").append([
$("td").addClass('detail-key').text(key),
$("td").addClass('detail-value-holder').append(
$("span").attr('data-resp', key).text(val)
)
]);
});
desired html:
<table id="details-tbl">
<tr>
<td class="detail-key">
"[KEY]"
</td>
<td>
<span class="detail-value" data-resp="[KEY]">
"[VAL]"
</span>
</td>
</tr>
</table>
The desired HTML is not showing up. There are no errors being thrown.
Can I use object keys as strings?

ng-repeat of json in value of another ng-reapeat

I have an ng-repeat that iterates through a JSON and renderes a table. What I want to do is to iterate through the value that is a JSON itself. But It behaves like a string.
<tr
ng-repeat="(key,value) in event.kibana._source track by $index"
ng-class-odd="'odd'">
<td>{{key}}</td>
<td>
<span>{{value}}</span>
<span ng-repeat="(k,val) in value track by $index">{{k}}|{{val}} </span>
</td>
</tr>
"value" is a JSON. The result inside the td looks like this:
{"bezeichnung":"Basis","name":"Basis","id":16} 0|{ 1|" 2|b 3|e 4|z 5|e
6|i 7|c 8|h 9|n 10|u 11|n 12|g 13|" 14|: 15|" 16|B 17|a 18|s 19|i 20|s
21|" 22|, 23|" 24|n 25|a 26|m 27|e 28|" 29|: 30|" 31|B 32|a 33|s 34|i
35|s 36|" 37|, 38|" 39|i 40|d 41|" 42|: 43|1 44|6 45|}
Of course this is not what I want. i want to iterate through the JSON and not the string. How can I do that?
EDIT:
THIS is what the JSON looks like:
{
"fold":11,
"id":64894760,
"entities":[{"bezeichnung":"Basis","name":"Basis","id":16}]
}

You have to parse JSON.(ex. JSON.parse(yourString)) https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

try removing track by $index. read the documentation here: ngRepeat
<tr id="{{key}}"
ng-repeat="(key,value) in event.kibana._source"
ng-class-odd="'odd'">
<td>{{key}}</td>
<td>
<span>{{value}}</span> //array of objects, [{"bezeichnung":"Basis","name":"Basis","id":16}]
<div ng-repeat="val in value track by val.id"> //single value in 'value' array
<span ng-repeat="(k,v) in val track by k">{{k}}|{{v}} </span>
</div>
</td>
</tr>
Problem was "value" was an array of object and you had "basis" as value for two keys. So, if tracked using key in the object, AngularJS can differentiate.
I've consider "id" key is unique for a particular value.

AngularJS - Using variable name in JSON selector

I have a table using angularjs where I want to loop through an array to print specific headers from a json object. The header prints out fine, but the problem comes when I try to use a variable from my nested ng-repeat as a json selector. If you replace the inner ng-repeat with the commented section below it, it will work.
Table:
<table>
<thead>
<th ng-repeat="column in tableHeader">{{column}} <a ng-click="sort_by(column);"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered>
<td ng-repeat="column2 in tableHeader">{{data.column2}}</td>
<!-- <td>{{data.Environment}}</td>
<td>{{data.HostIP}}</td>
<td>{{data.ServiceName}}</td>
<td>{{data.Status}}</td>
<td>{{data.StartTime}}</td>
<td>{{data.Capacity}}</td>
<td>{{data.Txn}}</td>
<td>{{data.Errors}}</td>
<td>{{data.Build}}</td>
<td>{{data.Project}}</td>
<td>{{data.Author}}</td>
<td>{{data.ModifyDate}}</td>
<td>{{data.Port}}</td>
<td>{{data.BasePath}}</td> -->
</tr>
</tbody>
</table>
Array located in controller:
$scope.tableHeader = ['Environment', 'HostIP', 'Status', 'ServiceName', 'StartTime', 'Capacity', 'Txn', 'Errors', 'Build', 'Project', 'Author', 'ModifyDate', 'Port', 'BasePath'];

I think you're looking for {{data[column2]}}. Since column2 is just the string value of the property you want, treat data like an associative array in this case to get the property you're trying to display.

column2 was created by the ng-repeat and is what you want. Note {{column2}}:
<td ng-repeat="column2 in tableHeader">{{column2}}</td>

How to handle array in angular js/HTML

I'm using a Web API to display values in HTML via Angular.
I have 4 attributes: Id, MovieName, Date and Cast. Cast is an array. I don't know how to handle the Cast attribute.
Controller.js
app.controller('MyController', function ($scope, MyService) {
$scope.getemploy = function () {
var promise = MyService.getMovies();
promise.then(function (pl) {
$scope.Movies= pl.data
},
function (error) {
$log.error('Some Prob', error);
});
}
GetMovies()--> will bring movie details(Cast attribute will have male, female lead names in the array).
HTML File :
<tr ng-repeat="mov in Movies">
<td>{{mov.Id}}</td>
<td>{{mov.MovieName}}</td>
<td>{{mov.Date}}</td>
<td>{{mov.Cast}}</td>
</tr>
But it's not working. I think I'll need some other way to handle Cast attributes, whether in html or angular.
My Json output for your reference:
[
{
"_movieId": 1,
"_moviename": "Olympus Has Fallen",
"_releaseDate": 2013,
"_cast": [
"Gerard Butler",
"Dylan McDermott",
"Aaron Eckhart",
"Angela Bassett"
]
}
Can anyone please help?

But its not working....
Because according to posted JSON your receive, HTML should be with different keys. Try this:
<tr ng-repeat="mov in Movies">
<td>{{mov._movieId}}</td>
<td>{{mov._moviename}}</td>
<td>{{mov._releaseDate}}</td>
<td>{{mov._cast.join(', ')}}</td>
</tr>
I used simple join method of array to render comma separated list of actors. If you need something more specific, you will need to make use of one more ngRepeat on mov._cast array (see Danny's answer).

I'm not sure what you mean by the Cast is not working, but I'm guessing it's just showing the JSON object in the HTML? You could show all the cast members in a list doing something like:
<tr ng-repeat="mov in Movies">
<td>{{mov.Id}}</td>
<td>{{mov.MovieName}}</td>
<td>{{mov.Date}}</td>
<td>
<ul>
<li ng-repeat="member in mov.Cast">{{ member }}</li>
</ul>
</td>
</tr>