如何访问位于json文件数组中的对象内部的数组？

Question

这是我的控制器角度代码，除了$scope.Product，一切都很好，我无法访问产品详细信息数组(模型和产品详细信息)，下面是html代码，我希望添加访问的产品详细信息并在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>

​

这是json文件

​

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

我假设您可以访问JSON对象的内容，并且只能将其内容转换为对象。

var parsed = JSON.parse(jsonstring);将返回一个JSON字符串表示的对象。它甚至会为您处理数组。

因此，如果您有一个包含JSON的字符串，只需在它上运行JSON.parse，它将为您提供一个可以执行parsed.products[0]等操作的对象。

Answer 2

角码：

.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代码：

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

我改变了什么:这是您的data-ng-repeat="detial in Product"中的一个错误，我将它更改为data-ng-repeat="detail in Product"。