JSON разбор в Angular JS

Я новичок в Angular JS. Я хочу проанализировать JSON, содержащий 2Darray в Angular JS, и хочу получить изображения из массива. Может ли кто-нибудь помочь мне в этом. У меня есть обновление мой plunker https://plnkr.co/edit/ZtqFdgCQEvfc7zJcnPnY?p=preview JSON разбор в Angular JS

HTML код

<!DOCTYPE html> 
    <html lang="en" ng-app="myApp"> 
     <head> 
      <title></title> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
     </head> 
     <body> 
      <table class="table table-bordered" ng-controller="testCtrl"> 
       <thead> 
        <tr> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
         <th>SL.no</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="product in products"> 
         <td>{{product.p_id}}</td> 
         <td>{{product.p_name}}</td> 
         <td>{{product.p_location}}</td> 
         <td>{{product.p_type}}</td> 
         <td>{{product.p_price}}</td> 
         <td>{{product.p_image}}</td> 
         <td>{{product.p_created}}</td> 
         <td>{{product.p_company}}</td> 
         <td>{{product.p_available_from}}</td> 
         <td>{{product.p_available_till}}</td> 
         <td>{{product.p_contact}}</td> 
         <td>{{product.abcimage}}</td> 
        </tr> 
       </tbody> 
      </table> 

     <script src="script.js"></script> 
     </body> 
    </html> 

JS : 
var myapp = angular.module('myApp',[]); 

myapp.controller('testCtrl', function($scope, $http){ 

    console.log("This is TestCtrl") 

    $http.get('search.json').success(function(response) { 
     console.log(response) 
     $scope.products=response; 

    }) 

}) 


JSON: 

[ 
    [ 
     { 
     "p_id":1, 
     "p_name":"shaast", 
     "p_location":"bangalore", 
     "p_type":"commercial", 
     "p_price":100000, 
     "p_image":"uploads\/property\/shaast\/images", 
     "p_created":"2016-05-04 12:42:48", 
     "p_company":"Shaast", 
     "p_available_from":"2016-05-04 00:00:00", 
     "p_available_till":"2016-05-19 00:00:00", 
     "p_contact":"1234567890" 
     }, 
     null 
    ], 
    [ 
     { 
     "p_id":2, 
     "p_name":"shaast1", 
     "p_location":"bangalore", 
     "p_type":"commercial", 
     "p_price":100000, 
     "p_image":"uploads\/property\/shaast1\/images", 
     "p_created":"2016-05-04 12:56:44", 
     "p_company":"Shaast1", 
     "p_available_from":"2016-05-04 00:00:00", 
     "p_available_till":"2016-05-05 00:00:00", 
     "p_contact":"1234567891" 
     }, 
     null 
    ], 
    [ 
     { 
     "p_id":3, 
     "p_name":"abc", 
     "p_location":"bangalore", 
     "p_type":"commercial", 
     "p_price":100000, 
     "p_image":"uploads\/property\/abc\/images", 
     "p_created":"2016-05-07 19:19:38", 
     "p_company":"qwerty", 
     "p_available_from":"2016-05-07 00:00:00", 
     "p_available_till":"2016-05-21 00:00:00", 
     "p_contact":"1234567896" 
     }, 
     [ 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Chrysanthemum.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Desert.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Hydrangeas.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Jellyfish.jpg" 
     } 
     ] 
    ], 
    [ 
     { 
     "p_id":4, 
     "p_name":"mantri", 
     "p_location":"bangalore", 
     "p_type":"commercial", 
     "p_price":11, 
     "p_image":"uploads\/property\/mantri\/images", 
     "p_created":"2016-05-14 14:55:53", 
     "p_company":"cvb", 
     "p_available_from":"2016-05-17 00:00:00", 
     "p_available_till":"2016-05-20 00:00:00", 
     "p_contact":"9934987654" 
     }, 
     [ 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Chrysanthemum.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Desert.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Hydrangeas.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Jellyfish.jpg" 
     }, 
     { 
      "mantriimage":"uploads\/property\/mantri\/images\/jasmin.jpg" 
     }, 
     { 
      "mantriimage":"uploads\/property\/mantri\/images\/tfd.jpg" 
     } 
     ] 
    ], 
    [ 
     { 
     "p_id":5, 
     "p_name":"Shaast7", 
     "p_location":"bangalore", 
     "p_type":"commercial", 
     "p_price":100000, 
     "p_image":"uploads\/property\/Shaast7\/images", 
     "p_created":"2016-05-14 16:06:13", 
     "p_company":"Shaast7", 
     "p_available_from":"2016-05-06 00:00:00", 
     "p_available_till":"2016-05-20 00:00:00", 
     "p_contact":"7207119201" 
     }, 
     [ 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Chrysanthemum.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Desert.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Hydrangeas.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Jellyfish.jpg" 
     }, 
     { 
      "mantriimage":"uploads\/property\/mantri\/images\/jasmin.jpg" 
     }, 
     { 
      "mantriimage":"uploads\/property\/mantri\/images\/tfd.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Koala.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Lighthouse.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Penguins.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Tulips.jpg" 
     } 
     ] 
    ], 
    [ 
     { 
     "p_id":6, 
     "p_name":"abc2", 
     "p_location":"bangalore", 
     "p_type":"commercial", 
     "p_price":100000, 
     "p_image":"uploads\/property\/abc2\/images", 
     "p_created":"2016-05-26 17:34:20", 
     "p_company":"Shaast4", 
     "p_available_from":"2016-05-26 00:00:00", 
     "p_available_till":"2016-05-24 00:00:00", 
     "p_contact":"7207119207" 
     }, 
     [ 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Chrysanthemum.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Desert.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Hydrangeas.jpg" 
     }, 
     { 
      "abcimage":"uploads\/property\/abc\/images\/Jellyfish.jpg" 
     }, 
     { 
      "mantriimage":"uploads\/property\/mantri\/images\/jasmin.jpg" 
     }, 
     { 
      "mantriimage":"uploads\/property\/mantri\/images\/tfd.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Koala.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Lighthouse.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Penguins.jpg" 
     }, 
     { 
      "Shaast7image":"uploads\/property\/Shaast7\/images\/Tulips.jpg" 
     }, 
     { 
      "abc2image":"uploads\/property\/abc2\/images\/Chrysanthemum.jpg" 
     }, 
     { 
      "abc2image":"uploads\/property\/abc2\/images\/Desert.jpg" 
     }, 
     { 
      "abc2image":"uploads\/property\/abc2\/images\/Hydrangeas.jpg" 
     }, 
     { 
      "abc2image":"uploads\/property\/abc2\/images\/Jellyfish.jpg" 
     }, 
     { 
      "abc2image":"uploads\/property\/abc2\/images\/Koala.jpg" 
     } 
     ] 
    ] 
]

источник

2016-07-04 Manoj Kadolkar

Попробуйте использовать этот

<tr ng-repeat="product in products"> 
    <td>{{product[0].p_id}}</td> 
    <td>{{product[0].p_name}}</td> 
    <td>{{product[0].p_location}}</td> 
    <td>{{product[0].p_type}}</td> 
    <td>{{product[0].p_price}}</td> 
    <td>{{product[0].p_image}}</td> 
    <td>{{product[0].p_created}}</td> 
    <td>{{product[0].p_company}}</td> 
</tr>

или использовать (key,value) в ng-repeat

<tr ng-repeat="(key,product) in products"> 
    <td>{{product[0].p_id}}</td> 
    <td>{{product[0].p_name}}</td> 
</tr>

источник

2016-07-04 06:35:49

вам еще нужно используйте 'product [0] .p_id' в' ng-repeat = "(ключ, продукт) в продуктах" ' – currarpickt

' (key, product) '.. product будет массивом. Если изменить это на вид, было бы проще сделать продукт '' и оставить остальное, поскольку OP имел его – charlietfl

@charlietfl, если вы используете продукт '' он будет показывать только первые данные – currarpickt

Существует дополнительный внешний массив для некоторых причина

Изменить

$scope.products=response;

Для

$scope.products=response[0];

или исправить источник, чтобы удалить наружную массиву

источник

2016-07-04 06:37:02 charlietfl

$http.get('search.json').success(function(response) { 
    console.log(response[0]) 
    $scope.products=response[0]; 

})

источник

2016-07-04 06:39:44

Рассмотрите возможность улучшить свой ответ с некоторым объяснением размещенного решения. – LPs

Используйте нг-повтор дважды для переборе 2D массива.

<tbody ng-repeat="productArr in products"> 
    <tr ng-repeat="product in productArr"> 
    <td>{{product.p_id}}</td> 
    <td>{{product.p_name}}</td> 
    <td>{{product.p_location}}</td> 
    <td>{{product.p_type}}</td> 
    <td>{{product.p_price}}</td> 
    <td>{{product.p_image}}</td> 
    <td>{{product.p_created}}</td> 
    <td>{{product.p_company}}</td> 
    <td>{{product.p_available_from}}</td> 
    <td>{{product.p_available_till}}</td> 
    <td>{{product.p_contact}}</td> 
    <td>{{product.abcimage}}</td> 
    </tr> 
</tbody>

источник

2016-07-04 06:46:34

JSON плохо отформатирован, но если вы не можете его изменить, построить лучшую структуру в обработчике успеха

$scope.products = response.map(function(item) { 
    var images = item[1] || [{"abcimage": ""}]; 
    return images.map(function(img) { 
     item[0].abcimage = img.abcimage; 
     return item[0]; 
    }); 
    }).reduce(Function.prototype.apply.bind(Array.prototype.concat));

И обновить HTML

ng-repeat="product in products track by $index"

источник

2016-07-04 07:21:42

JSON разбор в Angular JS

ответ

Смежные вопросы