Question

我是angularJS和网页设计的新手。我试图从JSON获取数据字段（或元素）。例如，这就是JSON的样子

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

我正在尝试获取“名称”数据字段。这就是我的.js文件的样子，

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);
    });

和我的.html文件，

<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>

同样，我没有遇到数据库或API调用的问题。我只想知道如何获取并显示JSON的名称字段。感谢。

Answer 1

上面的strelok2010评论应该有效，但这取决于你的结果是否真的像你问题顶部定义的那样。

您的结果似乎是一个普通的javascript对象而不是JSON。（是的，他们是不同的，当我学习它时，这让我很困惑。）我认为这是因为你将result从javascript对象字符串化为JSON。因此，如果它正常工作，则result是javascript对象或javascript对象数组。我假设一个阵列。你可能想检查一下。

我注意到您的earlier post存在相关问题。

在那个你要求访问数组中对象的属性。在那种情况下，它也是结果。以下是您上一个问题的答案

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

var firstResultsName = result[0].name;

由于这与你的上一个问题不一致，有两件事我不确定。

首先，结果对象中的name属性拼写为大写N，而不是上一个问题中的小写n。

请记住，在javascript中，资本化很重要。

其次，你在上一个问题中的结果是一个对象数组，在这里它似乎只是一个对象。

因此，取决于它将决定您的解决方案。因此，我不会编写所有可能的解决方案，而是向您展示如何确定解决方案。

请记住，我们正在处理一个正常的javascript对象数组。我会尝试详细说明，因此它非常清楚（抱歉，我听说你是网络开发的新手，我也是假设JavaScript。）但是抱歉，如果它也是一点点详细。我也将它分成几部分，以深入研究我在我的例子中使用的对象数组，但是如我所示，遍历数据结构可以在一行中完成。

您只能对“最外层”表单执行操作。（顺便说一句，“最外层的形式”只是我用来澄清的一个术语，它不是一个真正的技术术语。）并按照你的方式进入集合（对象/数组/字符串）

作为一个例子，我们有一组人，数组是最外层的形式＆＃39;

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" 
    } 
]

从数组

开始

因为它是一个数组作为最外层的形式＆＃39;我们可以使用索引获取其中一个值。就像任何其他阵列一样。只是为了一点对比，我将通过展示一个数组的例子来向您展示我们正在做的事情与其他任何数组类似

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

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

回到我们的主要例子。让我们成为一个可变的人，并将我们的第一个人存储在该数组中的人数组中。

var person = people[0];

现在，如果看到我们的人变量，它将等于以下

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

你可以像普通数组一样看到它抓住了数组中的第一个项目。您可以看到我们如何慢慢遍历我们的人员数据结构。（这是一个对象数组。）

输入对象

好的，现在我们有了person对象，但我们想要那个人的名字，所以既然我们正在处理一个对象，我们必须访问它的属性，我们可以使用＆＃39;点符号＆＃39;，例如<object>.<property>，或者＆＃39;括号符号＆＃39;可以使用变量或属性名称的字符串来完成。例如<object>.["<property>"]或<object>.[<variable>]

因此，作为一个侧面示例，我将向您展示获取对象属性值通常所需的内容，以便您可以比较并查看其中没有“魔法”＃39;继续请记住，javascript区分大小写。此外，与JSON不同，javascript对象属性可以带有或不带有引号。最后一个在属性名称中有空格的东西迫使我们使用引号，并且还强制我们通过括号表示法访问该属性。

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属性，则需要使用括号表示法将元素从对象中取出。括号表示法是两个对象property accessors中的一个，另一个是点符号。我在输入对象部分覆盖了两个。它可以在任何时候使用，但在某些情况下可用，点符号不起作用。

MDN的一个例子和引用：

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

property_name是一个字符串。该字符串不必是有效的标识符; ＆GT;它可以有任何价值，例如＆＃34; 1foo＆＃34;，＆＃34;！bar！＆＃34;，甚至＆＃34; ＆＃34; （空格）。

因此，由于某些字符如空格不能用于点表示括号，因此必须在存在这些字符的特殊情况下使用表示法。

下面是出生日期的括号表示法。

result["date of birth"]

就像之前我说过的，它可以在任何地方使用，但一般来说，点符号是优选的，因为它的简洁。所以为了表明这一点，我们将使用括号表示法显示名称字段：

result["name"]

您可能想要使用括号表示法的另一个原因是它能够使用这样的变量。

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

实际上，如果您理解该示例的原理，MDN示例可能更有意义。

如果您有任何问题，请随时给我留言。

使用HTML和AngularJS获取和显示JSON数据字段

1 个答案:

从数组

输入对象

做我们刚刚在单行做的一切

适用于您的问题