解析JSON并在angular中显示

Parsing from a JSON and show in angular

本文关键字:显示 angular 并在 JSON 解析      更新时间:2023-09-26

我有两个JSON格式的数据。我如何解析它们并在angular中显示?我真不知道该怎么做。在第二个数据中,plan_id也指向"计划"数据。我怎么能使小查找对象,将查找使用plan_id的"计划"。下面是json文件和我的索引

{  
   "plans":[  
      {  
         "id":1,
         "code":"NEXT_DAY_500gm",
         "name":"Next Day less than 500gm",
         "cost":55,
         "duration":24,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":2,
         "code":"NEXT_DAY_500gm_1kg",
         "name":"Next Day 500gm to 1kg",
         "cost":70,
         "duration":24,
         "min_weight":501,
         "max_weight":1000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":3,
         "code":"NEXT_DAY_1kg_2kg",
         "name":"Next Day 1kg to 2kg",
         "cost":95,
         "duration":24,
         "min_weight":1001,
         "max_weight":2000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":4,
         "code":"SAME_DAY_500gm",
         "name":"Same Day less than 500gm",
         "cost":95,
         "duration":8,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":5,
         "code":"SAME_DAY_500gm_1kg",
         "name":"Same Day 500gm to 1kg",
         "cost":130,
         "duration":8,
         "min_weight":501,
         "max_weight":1000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":6,
         "code":"SAME_DAY_1kg_2kg",
         "name":"Same Day 1kg to 2kg",
         "cost":165,
         "duration":8,
         "min_weight":1001,
         "max_weight":2000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      }
   ]
}

[{"id":23,"sender_id":3,"courier_id":0,"deliverer_id":0,"status":"PENDING","consignment_id":"55C0A999","sender_name":"asdasdas d","cost":"40","package_description":"asdasdasd","sender_address":"asdasdasd","sender_longitude":"","sender_latitude":"","sender_number":null,"receiver_address":"adasdasd","receiver_name":"Shifat Adnan","receiver_number":"01713206053","receiver_longitude":"","receiver_latitude":"","current_longitude":"","current_latitude":"","deliverer":null,"recipient_pays":0,"instructions":"2332323","payment_status":null,"cod":0,"recipient_zone_id":2,"plan_id":2,"store_id":null,"storeproduct_id":null,"created_at":"2015-08-04 12:01:29"},{"id":28,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"COMPLETED","consignment_id":"10F317","sender_name":"bleh","cost":"398","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"kjakdjlsdjlaksdjl","receiver_name":"Nigga","receiver_number":"010203001","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"jslklsdflkj","payment_status":null,"cod":0,"recipient_zone_id":null,"plan_id":4,"store_id":null,"storeproduct_id":null,"created_at":"2015-10-04 09:36:23"},{"id":34,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"PENDING","consignment_id":"137F24","sender_name":"bleh","cost":"3223","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"kasdlkaskd asldka","receiver_name":"FAAskl","receiver_number":"199102909","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"dsdsdf","payment_status":null,"cod":0,"recipient_zone_id":2,"plan_id":3,"store_id":null,"storeproduct_id":null,"created_at":"2015-10-06 07:58:28"},{"id":35,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"COMPLETED","consignment_id":"13C476","sender_name":"bleh","cost":"3310","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"sdfs dfasdfasdfasdf","receiver_name":"sfasd","receiver_number":"224","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"dasdasd","payment_status":null,"cod":0,"recipient_zone_id":2,"plan_id":1,"store_id":1,"storeproduct_id":1,"created_at":"2015-10-06 12:54:14"},{"id":36,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"COMPLETED","consignment_id":"13C4B3","sender_name":"bleh","cost":"330","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"sdfs dfasdfasdfasdf","receiver_name":"Some full name","receiver_number":"224","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"dasdasd","payment_status":null,"cod":0,"recipient_zone_id":3,"plan_id":4,"store_id":1,"storeproduct_id":2,"created_at":"2015-10-06 12:55:15”}]

index . html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Reports </title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-app="reportApp" ng-controller="mainCtrl">
    <table>
    </table>
</body>

我不知道下一步该做什么。如何解析和显示json?

将json对象分配给某个作用域对象变量注:请妥善保管终止符(;)。希望这篇文章能给你一些建议。

$scope.jsonScopeObject={  
   "plans":[  
      {  
         "id":1,
         "code":"NEXT_DAY_500gm",
         "name":"Next Day less than 500gm",
         "cost":55,
         "duration":24,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":2,
         "code":"NEXT_DAY_500gm_1kg",
         "name":"Next Day 500gm to 1kg",
         "cost":70,
         "duration":24,
         "min_weight":501,
         "max_weight":1000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":3,
         "code":"NEXT_DAY_1kg_2kg",
         "name":"Next Day 1kg to 2kg",
         "cost":95,
         "duration":24,
         "min_weight":1001,
         "max_weight":2000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":4,
         "code":"SAME_DAY_500gm",
         "name":"Same Day less than 500gm",
         "cost":95,
         "duration":8,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":5,
         "code":"SAME_DAY_500gm_1kg",
         "name":"Same Day 500gm to 1kg",
         "cost":130,
         "duration":8,
         "min_weight":501,
         "max_weight":1000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":6,
         "code":"SAME_DAY_1kg_2kg",
         "name":"Same Day 1kg to 2kg",
         "cost":165,
         "duration":8,
         "min_weight":1001,
         "max_weight":2000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      }
   ]
}
<!DOCTYPE HTML>
    <html>
        <head>
            <title>Pathao Reports </title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    </head>
    <body ng-app="reportApp" ng-controller="mainCtrl">
        <table>
             <th>head1</th>
             <th>head2</th>

        </table>
        <tbody>
              <tr ng-repeat="data in jsonScopeObject.plans">
                 <td>{{data.id}}</td>
                 <td>{{data.code}}</td>
              <tr>
        </tbody>

</body>