JSON parsing in Angular JS

Question

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

Hadi · Accepted Answer · 2016-07-04 06:49:22Z

2

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>

edited Jul 4, 2016 at 6:49

answered Jul 4, 2016 at 6:35

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

currarpickt Over a year ago

you still need to use product[0].p_id in ng-repeat="(key,product) in products"

charlietfl Over a year ago

(key,product) .. product will be array. If changing this in view would be simpler to do <tr ng-repeat="product in products[0]"> and leave the rest as OP had it

currarpickt Over a year ago

@charlietfl if you use <tr ng-repeat="product in products[0]"> it will only show first data

charlietfl Over a year ago

@currarpickt look at OP data structure...it is a big array that is the only element of an outer array

currarpickt Over a year ago

@charlietfl I tried your code, and it returned only the data for p_id = 1

|

Eric Nelson · Accepted Answer · 2016-07-04 07:21:42Z

1

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"

answered Jul 4, 2016 at 7:21

Eric Nelson

3463 silver badges6 bronze badges

Comments

charlietfl · Accepted Answer · 2016-07-04 06:37:02Z

0

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

answered Jul 4, 2016 at 6:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

rejo · Accepted Answer · 2016-07-04 06:39:44Z

0

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

})

answered Jul 4, 2016 at 6:39

rejo

3,3405 gold badges29 silver badges35 bronze badges

1 Comment

LPs Over a year ago

Consider to improve your answer with some explanation of posted solution.

viren Kalkhudiya · Accepted Answer · 2016-07-04 06:46:34Z

0

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>

answered Jul 4, 2016 at 6:46

viren Kalkhudiya

8227 silver badges8 bronze badges

Collectives™ on Stack Overflow

JSON parsing in Angular JS

5 Answers 5

6 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related