AngularJS在JSON中循环遍历数组并在表中列出 - 值未显示

时间:2015-08-04 09:59:25

标签: javascript json angularjs

我要做的是对API(我已经工作)进行搜索,然后在表格中显示返回的信息。下面是我的代码和我想要实现的内容以及我目前看到的模拟图像。

JSON

{
    "legalDescription": "Pork & Egg Gala Pie",
    "QUID": [
        "Pork 38%"
    ],
    "warningStatement": [
        "Caution: May contain bone"
    ],
    "GTIN": "0213090000000",
    "allergenInfo": [
        {
            "allergenName": "Contains",
            "allergenValues": "Wheat"
        },
        {
            "allergenName": "Contains",
            "allergenValues": "Egg"
        }
    ],
    "href": "http://product.global.tesco.org:8080/v2/products/counterproducts/0213090000000"
}

AngularJS

$scope.products = [];

    $scope.runCountersSearch = function() {

        $http.get("http://product.global.tesco.org:8080/v2/products/counterproducts/" + $scope.searchInputCounters).success(function(theData) {

            $scope.products.push(theData);
        });

    }

HTML

<tr ng-repeat = "oneProduct in products">
                    <td> {{oneProduct.legalDescription}} </td>
                    <td ng-repeat="quid in oneProduct.QUID"> {{quid.QUID}} </td>
                    <td ng-repeat="warning in oneProduct.warningStatement">{{warning.warningStatement}} </td>
                </tr>
            </table>

我看到的内容 What I See 我想要的是什么 What I want to get

2 个答案:

答案 0 :(得分:0)

将其更改为

var url = 'http://product.global.tesco.org:8080/v2/products/counterproducts/';

$http.get(url + $scope.searchInputCounters).success(function(theData) {
    $scope.products.push(theData.data);
});

如果你看angular $http docs

  

响应对象具有以下属性:

     
      
  • 数据 - {string|Object} - 使用转换函数转换的响应正文。
  •   
  • 状态 - {number} - 响应的HTTP状态代码。
  •   
  • 标题 - {function([headerName])} - 标题获取功能。
  •   
  • config - {Object} - 用于生成请求的配置对象。
  •   
  • statusText - {string} - 响应的HTTP状态文本。
  •   

因此,当数据在响应中返回时,您需要使用data属性提取它

另请注意,QUIDwarningStatement是数组,而不是字符串。

答案 1 :(得分:0)

class ProjectsController < ApplicationController before_action :set_project, only: [:show, :edit, :update, :destroy] respond_to :html def index @projects = Project.all respond_with(@projects) end def show respond_with(@project) end def new @project = Project.new @project.pictures.build @project.teams.build respond_with(@project) end def edit @project = Project.find(params[:id]) @project.pictures.build @project.teams.build end def create @project = Project.new(project_params) if @project.save flash[:notice] = "Successfully created project." redirect_to @project else render :action => 'new' end end def update @project.update(project_params) respond_with(@project) end def destroy @project.destroy respond_with(@project) end private def set_project @project = Project.find(params[:id]) end def project_params params.require(:project).permit(:id, :title, :description, :status, :phase, :location, :image, pictures_attributes: [:id, :image], teams_attributes: [:project_id, :user_id, :id, :member]) end end "QUID"中,您有一个字符串数组,因此您可以像这样更改HTML:

"warningStatement"