Attaching JSON data to AngularJS form fields

Question

I have received some JSON data in this format:

[{
    "Id": 0,
    "Text": "Item 1",
    "Selected": 1
}, {
    "Id": 1,
    "Text": "Item 2",
    "Selected": 1
}]

Additionally, there is an input element as follows:

<input type="text"
 value="{{question.postObjs}}"

What I am aiming to achieve is to display the values of the "Text" property from the JSON data as a list within the input field.

Item 1, Item 2, ...

Is it possible to accomplish this task? I have been experimenting with different approaches without success so far.

Answer 1

Answer №1

Within your controller:

let newText = '';    
for (let val in scope.question.postObjs){
    newText = newText + val.Text;
}

Incorporate into your input field:

<input type="text" value="{{newText}}" />

Alternatively:

<input type="text" ng-model="newText" />

Answer 2

Within your controller:

let newText = '';    
for (let val in scope.question.postObjs){
    newText = newText + val.Text;
}

Incorporate into your input field:

<input type="text" value="{{newText}}" />

Alternatively:

<input type="text" ng-model="newText" />

Answer 3

Create a function in your AngularController as shown below

$scope.getList(){
   // this function will output ["Element1", "Element2"]
}

You can then call this function in your view to display the values.

Answer 4

Create a function in your AngularController as shown below

$scope.getList(){
   // this function will output ["Element1", "Element2"]
}

You can then call this function in your view to display the values.