Develop Reference

Angular js solve a different format of a json array of objects

Based on the result below , how can an angular for each loop be able to solve that json array of objects format ? The value is title and the id is key. Any Idea? Thank you.
mycode
me.record.questionaires = []
angular.forEach(detail.questionaires, function (value, key) {
me.record.questionaires.push({ "id": key, "title": value })
});
Formated json data (detail.questionaire result)
[
"{'sub_title': 'dsadsa', 'instruction': 'You Must',…elimit': '01:05:19', 'title': 'asdsa', 'id': 133}",
"{'sub_title': 'sdasdsa', 'instruction': None, 'cre…melimit': '05:30:09', 'title': 'asda', 'id': 131}"
]

You need to
Loop over the array
Parse the string as JSON
Push or map the appropriate values into your questionaires array (it's not clear what data you want)
me.record.questionaires = detail.questionaires.map(json => {
let { id, title } = JSON.parse(json)
return { id, title }
})

I had to change your sample formatted JSON a bit because it was giving me console errors. Please see if this helps.
angular
.module("myModule", [])
.controller("myController", function($scope) {
var me ={record: {questionaires: []}};
$scope.me = me;
var detail ={};
detail.questionaires = [
"{'sub_title': 'dsadsa', 'instruction': 'You Must','…elimit': '01:05:19', 'title': 'asdsa', id: 133}",
'{"sub_title": "sdasdsa", "instruction": "None", "cre…melimit": "05:30:09", "title": "asda", "id": 131}'
];
angular.forEach(detail.questionaires, function (value, key) {
var questionaire = JSON.parse(value.replace(/'/g, '"').replace(/id:/g, '"id":'));
me.record.questionaires.push({ "id": questionaire.id, "title": questionaire.title });
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myModule">
<div ng-controller="myController">
<div><strong>me.record.questionaires:</strong></div>
<div ng-repeat="q in me.record.questionaires">
<div>{{q}}</div>
</div>
</div>
</div>

AngularJS: Uncaught Error: [$rootScope:infdig]

I am trying to get all the courts for each game:
The HTML looks like this:
<div ng-repeat = "g in games">
{{g.gameName}}
<ul>
<li ng-repeat = "c in getCourts(g.id)" ng-bind = "c.courtName"></li>
</ul>
</div>
The controller is :
$scope.games = {};
$scope.courts = {};
//$scope.slots = {};
$http.get(URI+"booking/allGames").then(function success(res){
$scope.games = res.data;
//console.log($scope.games);
},
function error(res){
console.log(res.data.message);
});
$scope.getCourts = function(gameId){
//courts = {};
$http.get(URI+"booking/courts/"+gameId).then(function success(res){
//console.log(gameId);
console.log(res.data);
return res.data;
//return courts;
},
function error(res){
console.log(res.data.message);
});;
}
When I execute this, I getting this error:
angular.min.js:6 Uncaught Error: [$rootScope:infdig]
The angularJS documentaion says,
This error occurs when the application's model becomes unstable and
each $digest cycle triggers a state change and subsequent $digest
cycle.
One common mistake is binding to a function which generates a new
array every time it is called.
I saw this answer : AngularJS use a function in a controller to return data from a service to be used in ng-repeat
But I am not sure how to fix this.

I think your only option is to pre-fetch all the data like this...
$http.get(URI+"booking/allGames").then(res => {
$q.all(res.data.map(game => {
return $http.get(URI+"booking/courts/"+game.id).then(res => {
return angular.extend(game, {courts: res.data});
});
})).then(games => {
$scope.games = games;
});
});
Then you can just use a nested repeater
<div ng-repeat="g in games">
{{g.gameName}}
<ul>
<li ng-repeat="c in g.courts" ng-bind="c.courtName"></li>
</ul>
</div>

I do recommend Phil's answer.
Here is my alternate approach
Note: I just hardcoded the data for demonstration, you need to call http in your case
//html
<div ng-controller="MyCtrl">
<div ng-repeat = "g in games">
{{g.gameName}}
<ul ng-init='getCourts(g.id)'>
<li ng-repeat = "c in courts[$index]" ng-bind = "c.data"></li>
</ul>
</div>
</div>
//js
$scope.courts = [];
$scope.games = [
{
id:1,
gameName:'A'
},{
id:2,
gameName:'B'
},{
id:3,
gameName:'C'
}
];
$scope.getCourts = function(id){
if(id==1){
$scope.courts[0]=[{data:'first'},{data:'second'}];
}else if(id == 2){
$scope.courts[1]=[{data:'third'},{data:'fourth'}];
}else{
$scope.courts[2]=[{data:'five'},{data:'six'}];
}
}
fiddle: http://jsfiddle.net/Lvc0u55v/8061/

2 Json document associate and nested in angularJS

I have two json. For example
1
[ {"id":"23", "name":"mehmet"} , {"id":"22", "name":"jack"} ]
2
[ {"id":"1", "userID":"23"} , {"id":"2", "userID":"23"}, {"id":"3", "userID":"22"}]
in the first json mehmet have 2 entries second json ( associate userID )
I want to...
mehmet (source first json)
id:1 (second json)
id:2 (second json)
jack(source first json)
id:3 (second json)
My controller:
.controller('ListviewCtrl', function($scope, $http, SERVER) {
$scope.topics = [];
function loadTopics(params, callback){
$http.get(SERVER.url+'/listtopic', {params: params})
.success(function(response){
var topics = [];
angular.forEach(response, function(result){
topics.push(result);
});
callback(topics);
});
};
$scope.tweetler = [];
function loadTweetler(params, callback){
$http.get(SERVER.url+'/tweet')
.success(function(response){
var tweetler = [];
angular.forEach(response, function(result){
tweetler.push(result);
});
callback(tweetler);
});
};
how to use ng-repeat and list associate 2 json ?

You can create a filter inside the child ng-repeat, as follows:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.parents = [
{
"id":23,
"name":"mehmet"
},
{
"id":22,
"name":"jack"
}
];
$scope.childs = [
{
"id":1,
"userID":23
},
{
"id":2,
"userID":23
},
{
"id":3,
"userID":22
}
];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<ul>
<li ng-repeat-start="parent in parents" ng-bind="parent.name"></li>
<ul ng-repeat-end ng-repeat="child in childs | filter: { userID: parent.id }">
<li ng-bind="'Id:' + child.id"></li>
</ul>
</ul>
</body>
</html>

Make one of that arrays to an object, then its easier to grab the data from it. To make it simpler take the 1:1 relationship array..
var users = [
{"id":"1", "name":"mehmet"},
{"id":"2", "name":"jack"}
]
// This is simple 1:1 relationship.. ID:NAME
{
"1": "mehmet",
"2": "jack"
}
// To do it, is very simple
$scope.users = {};
angular.forEach(users, function(user) { $scope.users[user.id] = user.name})
Then you can take the correct User by ID
<li ng-repeat="post in posts">
<span>Author: {{users[post.userId]}}</span>
</li>

Add item to array Angular

I have a table with these fields: product, lot, input1, input2. You can clone a line, and you can add a new line.
What I want to do is that for each row you can add a new Lot created by a "number" and by "id" that user write in the input field under the Select lot. And I wanted that the script add the new Lot in the json data and the lot 's option list.
This is the function for add that I tried to do:
$scope.addLot = function() {
var inWhichProduct = row.selectedProduct;
var newArray = {
"number": row.newLot.value,
"id": row.newLot.id
};
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selectedProduct === inWhichProduct) {
$scope.items[i].selectedLot.push(newArray);
}
}
};
-->> THIS <<-- is the full code.
Can you help me?

I think your question is a little too broad to answer on Stack Overflow, but here's an attempt:
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="lot in lots">
<td>{{ lot.id }}</td>
<td>{{ lot.name }}</td>
</tr>
</table>
<p>name:</p> <input type="text" ng-model="inputName">
<p>id:</p> <input type="text" ng-model="inputId">
<button ng-click="addLotButton(inputId, inputName)">Add</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lots = [{
name: "test",
id: 1
},
{
name: "test2",
id: 2
}
];
$scope.addLot = function(lotId, lotName) {
var newLotObject = {
name: lotName,
id: lotId
};
$scope.lots.push(newLotObject);
};
$scope.addLotButton = function(id, name) {
$scope.addLot(id, name);
};
$scope.addLot(3, "Another test");
});
</script>
Basically this code just takes some input and adds an object to the scope for that input. The table is created using an ng-repeat of this data. It's not great code at all but it's just a quick example.

The push method adds newArray to selectedLot array. It's not working on the JSON data but on arrays. If you want to have the JSON, you can give a try to :
var myJsonString = JSON.stringify(yourArray);
It will create a JSON string based on the parameter
Maybe you should try to structure your data to make lots as properties of products.
{
products: [
{id: 1, lots: [{id:1}, {id:2}]},
{id: 2, lots: [{id:1}, {id:2}]}
]
}
To add a lot to a product :
product = products[0];
product.lots.push(newArray);

Change the fallowing:
html:
<button ng-click="addLot(row.selectedProduct.id,row.newLot.value,row.newLot.id)">Add</button>
js:
$scope.addLot = function(id,val,lotId) {
// console.log(id);
var inWhichProduct = id;
var newArray = { "value": val, "id": lotId };
//console.log($scope.items)
angular.forEach($scope.items,function(v,i){
if($scope.items[i].id == id )
{
$scope.items[i].lots.push(newArray);
console.log($scope.items[i].lots);
}
});
};
http://plnkr.co/edit/W8eche8eIEUuDBsRpLse?p=preview

How to push items in a nested array with AngularJs

I'm looking for two things:
To push items in a nested array with Angularjs
To understand how it works exactly.
I've been looking for answers on differents previous topic but I didn't manage to come to a solution.
Actually, I want to use an Add Item button to push an item in a items array under a facture object.
Here is my controller:
PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
});
$scope.ajouterItem = function(index, item){
$scope.facture.items[index].item.push({
description: 'Test'
});
}
});
And here is my data structure (as returned by my API)
{
"id":10200,
"client_id":1,
"lead_id":1,
"courtedescription":"Description test",
"etat":"En attente",
"created_at":"2015-02-21 15:07:17",
"updated_at":"2015-02-21 15:07:17",
"items":[
{
"id":1,
"facture_id":10200,
"description":"Item num\u00e9ro 1",
"prix":"15.00",
"tps":"0.75",
"tvq":"1.50",
"grandtotal":"17.25",
"created_at":"2015-02-21 15:07:18",
"updated_at":"2015-02-21 15:07:18"
},
{
"id":2,
"facture_id":10200,
"description":"Deuxi\u00e8me item quoi",
"prix":"135.00",
"tps":"6.75",
"tvq":"13.47",
"grandtotal":"155.22",
"created_at":"2015-02-21 15:07:18",
"updated_at":"2015-02-21 15:07:18"
}
]
}
Of course my HTML contains a button:
<form ng-submit="ajouterItem(item)">
<button class="btn btn-primary">Ajouter un item</button>
</form>
Actually I got an error (undefined) when I press to button. What is wrong?

For those who are still looking for pushing data in the nested array can refer below example of Comments and Replies :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!--Comment section-->
<ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">
<li>
<b>Comment {{$index}} : </b>
<br>
{{comment.comment}}
<!--Reply section-->
<ul ng-repeat="reply in comment.reply track by $index">
<li><i>Reply {{$index}} :</i><br>
{{reply.comment}}</li>
</ul>
<!--End reply section-->
<input type="text" ng-model="reply" placeholder=" Write your reply." />Reply
</li>
</ul>
<!--End comment section -->
<!--Post your comment-->
<b>New comment</b>
<input type="text" placeholder="Your comment" ng-model="comment" />
Post
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
//Comments object having reply oject
$scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];
//push reply
$scope.insertReply = function (index, reply) {
$scope.comments[index].reply.push({ comment: reply });
}
//push commnet
$scope.newComment = function (comment) {
$scope.comments.push({ comment: comment, reply: [] });
}
});
</script>
</body>
</html>

Since there is no item property inside the items array objects, you cant push to it. You have to add:
$scope.facture.items[index].item = []
before you can push to it. Also check your functions parameters as Marc states in his comment. Since we can't see all of the markup it is unclear what is passed to the function, a simple console.log() will show you that ofcourse.

I found the answer, it was finaly simpler than I first thought:
$scope.ajouterItem = function(){
$scope.facture.items.push({
description: 'Test'
});
}

First, create a variable to fill, delete, and add items. Next, assign this variable to the array inside the model.
PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture )
{
$scope.items= [];
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
$scope.items = $scope.facture.items;
});
$scope.ajouterItem = function(item){
$scope.items.push(item);
$scope.facture.Items = $scope.items;
}
});
In this way, you can also edit the previous information and add new information. Since we first set "items". To remove the same as usual :
$scope.RemoveItem = function (index) {
$scope.facture.Items.splice(index, 1);
};