Getting and displaying JSON data fields using HTML and AngularJS

Question

Im new for corner and web design in general. I am trying to get a data field (or item) from JSON. For example, this is what JSON looks like

{
  "Name":"Raymond Eugene Monce",
  "Dateofbirth":"1924-0308T00:00:00Z",
  "Ethnicity":"Caucasian",
  "Languages":["{English}"],
 },

and I'm trying to get the "Name" data field. This is what my .js file looks like,

var profile = angular.module('profile', ['ui.bootstrap','ngResource']);

profile.controller("profileController", ["$scope","$resource", function($scope, $resource) {

    // get the user id
    $scope.userid = sessionStorage["cerestiuserid"];

    // json we get from server
    $scope.apicall = sessionStorage["cerestihome"];     // NEED TO CHANGE API

    // grabs the user we want
    $scope.userResource = $resource($scope.apicall + "/api/userprofile/", 
      {Userid:21},  
      {'get':{method: 'POST'}}
    );

    // fetch JSON           
    $scope.userResource.get(function(result) {
      // get the name field
      $scope.name = result;
      sessionStorage["name"] = JSON.stringify(result);
    });

and my .html file,

<div ng-controller = "profileController" style="float:left">
  <!-- profile pic -->
  <div class="pull-left">
    <div class="container-fluid">
      <div class="profile">
        <div class="row">
          <div class="center-block">
            <div class="profilePic">
              <img ng-src="{{profilePic()}}" class="img-responsive">
                <!-- name field -->
                <label class="caption">
                  <h4>{{name.name}}</h4>
                </label>
            </div>

Again, I have no problem calling the database or API. I just want to know how I can get and display the JSON name field. Thank.

Answer 1

The strelok2010 comment above should work, although it depends on whether your result will really look like the one at the top of your question.

javascript-, JSON. (, , , .) , , result javascript JSON. , , result javascript-, javascript. . , .

, .

, . . .

var result = [{"name": "Jason"
  "date of birth": "february 23, 2985"
  ....
 }];

var firstResultsName = result[0].name;

, - .

name N , n .

, javascript.

-, , .

, , . , , , .

, javascript. , (, , -, JavaScript), , . , , , , .

" " (, " " - , , .) ( //)

, " "

var people = [ 
    { 
        "name": "Bob", 
        "occupation": "Architect",
        "date of birth": "01/23/83"
    }, 
    { 
        "name": "Timothy", 
        "Occupation": "Accountant",
        "date of birth": "02/23/78" 
    } 
];

, .

[ 
    { 
        "name": "Bob", 
        "occupation": "Architect",
        "date of birth": "01/23/83"
    }, 
    { 
        "name": "Timothy", 
        "Occupation": "Accountant",
        "date of birth": "02/23/78" 
    } 
]

" ", , . . , , , ,

// simple array example
var array = ["foo", "bar", "baz"];
array[0] // returns "foo"

// more simple array example, but less practical (it more just for showing how javascript can work.)
["foo", "bar", "baz"][2] // returns "baz"

. people .

var person = people[0];

, ,

{ 
    "name": "Bob", 
    "occupation": "Architect",
    "date of birth": "01/23/83"
}

, , . , . ( .)

, person, , , , " ", . <object>.<property>, " ", , . <object>.["<property>"] <object>.[<variable>]

, , , , , , "". , javascript . , javascript , JSON. , , , .

var result;
var obj = { foo: 1, Bar: 2, "foo bar": 3 };
var randomVarName = "Bar"; // notice the capital B in Bar is important since it was declared that way.

result = obj.foo; // result equals 1
result = obj[randomVarName]; // result equals 2
result = obj["foo bar"]; // result equals 3

. , , , .

var name = person.name;

.

"Bob"

, . , .

,

, ,

people[0].name

, ,

var result = [
    {
         "name": "Jason"
         "date of birth": "february 23, 2985"
         ....
     }
];

,

result[0].name

 var result = {
     "name": "Jason"
     "date of birth": "february 23, 2985"
     ....
 }

result.name

, date of birth , , . , . . , .

MDN:

get = object[property_name];
object[property_name] = set;

property_name - . ; > , . "1foo", "! Bar!" "" ().

, , , , , .

.

result["date of birth"]

, , . , , , :

result["name"]

, , .

var prop_name = "date of birth";
result[prop_name];

, , MDN .

, .