CODEWITHSUNDEEP
jsonangularjs
Mark
Mark

Reputation: 783

How to display a value from JSON in AngularJS

How can I display a value from JSON data in AngularJS. I am doing a API call to get the JSON data.

An example of some values I want to display:

"Example": [{
    "Source": "Something Here",
    "Value": "1"
}, {
    "Source": "Something Else",
    "Value": "2"
}, {
    "Source": "Another One",
    "Value": "3"
}],

The example shows how the JSON data is delivered. How do I display the value of “something here” and/or display the value of “something else”

I have no problems displaying 

"Test1": "Value 1",
"Test2": "Value 2",
"Test3": "Value 3",

Using a function:

function fetch() {
  $http.get("https://www.example.com/exampleData.json")
    .then(function(response) {
      $scope.display = response.data;
    }); 
}

And displaying it with:

<div ng-if="display.Response==='True'">
{{ display.Test1 }}
</div>

Hope I explained myself good enough as I am pretty new to Angular but love it so far!

Upvotes: 0

Views: 80

Answers (3)

milad shafiei
milad shafiei

Reputation: 286

<div ng-repeat="item in display.Example"> {{item.Source}} : {{item.Value}} </div>

Upvotes: 0

Mark
Mark

Reputation: 783

Figured it out:

"Example": [{
"Source": "Something Here",
"Value": "1"
}, {
"Source": "Something Else",
"Value": "2"
}, {
"Source": "Another One",
"Value": "3"
}],

The Example is some nested JSON data.

To display a value you can do as so from Example:

<div>Show it to me: {{display.Example[1].Source}}</div>

Which will output:

Show it to me: Something Else

As I said before I am new to angularjs but it's pretty amazing the things you can do.

Upvotes: 1

basskibo
basskibo

Reputation: 1

I did not quit understood you what exactly is question, but i could try to guess. Maybe you want to display all values from array: 

"Example": [{
    "Source": "Something Here",
    "Value": "1"
}, {
    "Source": "Something Else",
    "Value": "2"
}, {
    "Source": "Another One",
    "Value": "3"
}],

You can do this with ng-repeat, i made you little example : https://jsfiddle.net/cowhazj0/3/

I hope it helps.

Upvotes: 0

Related Questions