CODEWITHSUNDEEP
javascripthtmlangularjs
Manoj Kadolkar
Manoj Kadolkar

Reputation: 716

JSON parsing in Angular JS

I'm new to Angular JS. I want to parse JSON containing 2Darray in Angular JS and want to fetch the images from array. Could anyone please help me with this. I have update my plunker https://plnkr.co/edit/ZtqFdgCQEvfc7zJcnPnY?p=preview

HTML Code

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

Upvotes: 0

Views: 90

Answers (5)

Eric Nelson
Eric Nelson

Reputation: 346

The json is poorly formatted but if you can't change it, build a better structure in your success handler

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

And update your html

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

Upvotes: 1

Hadi
Hadi

Reputation: 17289

Try use this 

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

or use (key,value) in ng-repeat

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

Upvotes: 2

viren Kalkhudiya
viren Kalkhudiya

Reputation: 792

Use ng-repeat twice for iterating 2D array.

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

Upvotes: 0

rejo
rejo

Reputation: 3350

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

})

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

There is an extra outer array for some reason

Change 

$scope.products=response;

To

$scope.products=response[0];

or fix source to remove outer array

Upvotes: 0

Related Questions