如何访问对象内的数组，该对象本身位于 Angular 中的 json 文件数组内？

Question

This is my controller Angular code , and everything is working fine except the $scope.Product , I can't access the array of product details (mockup and product details and under it is the html code which I wish to add the accessed product details and iterate it inside an ng-repeat

 .controller('aboutCtrl', function ($scope, aboutService) { var promise = aboutService.getAbout(); promise.then(function (rcdata) { $scope.about = rcdata.data.about; $scope.products = rcdata.data.products; $scope.mobileProduct = rcdata.data.mobileProduct; $scope.clients = rcdata.data.clients; $scope.anytime = rcdata.data.anytime; $scope.lobProduct = rcdata.data.lobProduct; $scope.Product = rcdata.data.lobProduct.projectsdetails; }); })

 <section class="product-detail padding"> <div class="container"> <div class="row"> <div class="col-md-6" data-ng-repeat="detial in Product"> <div class="prdct-d"> <img class="img-responsive" src="<?php echo $img; ?>Computer/{{detial.mockup}}"> <p> {{detail.description}} </p> </div> </div> </div> </div> </section>

And here is the json file

 { "products": [ { "icon": "flaticon-computer", "title": "Line Of Business", "description": "Root Cave focus on delivering top notch data driven line of business application which are mission critical software specific to the business. We understand the needs and expectations for the user experience and design simple interfaces for complex web applications that help users do more with less." }, { "icon": "flaticon-technology-2", "title": "Mopile App", "description": "Mobile devices are increasingly utilized to access content and interact with brands. So, it is critical that you have a well-designed and solidly executed mobile experience. Root Cave provides clients with brand consistency through and throughout customized mobile websites and applications." } ], "about": [ { "icon":"1-sales.png", "title":"Sales", "description": "Sales by Root Cave CRM provides a complete and intuitive solution that can help salespeople be more productive so they can focus on what's most important—delivering amazing customer experiences." }, { "icon":"2-cs.png", "title":"Service", "description": "Service by Root Cave CRM empowers customers through their choice of self and assisted service options; empowers agents to deliver fast, informed and effective resolutions; and seamlessly incorporates field solutions when there is a need for onsite help. Our agile solutions easily adapt to changing demands so that your business can deliver intent driven outcomes in a secure, flexible and reliable environment.." }, { "icon":"3-marketing.png", "title":"Marketing", "description": "Root Cave Marketing is an integrated marketing resource management solution for marketing operation, planning, execution, and analytics across all channels—email, digital, social, SMS, and traditional." }, { "icon":"4-financials.png", "title":"Finance", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "icon":"5-hr.png", "title":"Human Resources", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "icon":"6-ecommerce.png", "title":"Ecommerce", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "icon":"7-school.png", "title":"School", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "icon":"8-medical.png", "title":"Medical", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ], "anytime": [ { "icon":"box.png", "title":"Title Here", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "icon":"clock.png", "title":"Title Here", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "icon":"cloud.png", "title":"Title Here", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ], "clients": [ { "clinetLogo": "logoclient.png" }, { "clinetLogo": "logoclient.png" }, { "clinetLogo": "logoclient.png" }, { "clinetLogo": "logoclient.png" }, { "clinetLogo": "logoclient.png" }, { "clinetLogo": "logoclient.png" } ], "lobProduct": [ { "mockup": "1 (1).png", "id": 0, "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "title": "Hello", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "projectsdetails": [ { "mockup_details": "1 (1).png", "description_details": "Hello 0 Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (2).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (3).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (4).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ] }, { "mockup": "1 (1).png", "id": 1, "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "title": "title here", "description": "hello ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "projectsdetails": [ { "mockup_details": "1 (1).png", "description_details": "product 1 Hi everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (2).png", "description_details": "Hi 2 ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (3).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (4).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ] }, { "mockup": "1 (1).png", "id": 2, "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "title": "title here", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "projectsdetails": [ { "mockup_details": "1 (1).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (2).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (3).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (4).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ] }, { "mockup": "1 (1).png", "id": 3, "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "title": "title here", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.", "projectsdetails": [ { "mockup_details": "1 (1).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (2).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (3).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "mockup_details": "1 (4).png", "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ] } ], "mobileProduct": [ { "id": "1", "title": "Title Here", "mockup": "thumb-slider-portrait-3-opt-501x900.png", "description": "1111Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "id": "1", "title": "Title Here", "mockup": "thumb-slider-portrait-3-opt-501x900.png", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "id": "1", "title": "Title Here", "mockup": "thumb-slider-portrait-3-opt-501x900.png", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." }, { "id": "1", "title": "Title Here", "mockup": "thumb-slider-portrait-3-opt-501x900.png", "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei." } ] }

Answer 1

I assume that you're able to access the content of the JSON object and that you're stuck on converting its contents into an object.

var parsed = JSON.parse(jsonstring); will return the object represented by a string of JSON. It will even deal with arrays for you.

So if you have a string containing your JSON, just run JSON.parse on it and it will give you an object with which you can do parsed.products[0] etc.

Answer 2

Angular code:

.controller('aboutCtrl', function ($scope, aboutService) {
        var promise = aboutService.getAbout();
        promise.then(function (rcdata) {
            $scope.about = rcdata.data.about;
            $scope.products = rcdata.data.products;
            $scope.mobileProduct = rcdata.data.mobileProduct;
            $scope.clients = rcdata.data.clients;
            $scope.anytime = rcdata.data.anytime;
            $scope.lobProduct = rcdata.data.lobProduct;
            $scope.Product = rcdata.data.lobProduct.projectsdetails;
        });
    })

HTML code:

<section class="product-detail padding">
    <div class="container">
        <div class="row">
            <div class="col-md-6" data-ng-repeat="detail in Product">
                <div class="prdct-d">
                    <img class="img-responsive" src="<?php echo $img; ?>Computer/{{detial.mockup}}">
                    <p>
                        {{detail.description}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

What I changed: it was a typo mistake in your data-ng-repeat="detial in Product" and I changed it to data-ng-repeat="detail in Product" .