Question

我需要在2个不同的div中加载2个不同的.json文件的内容。

<div class="box1">First</div>
<div class="box2">Second</div>

first.json

{
"item": {
    "name": "Pippo",
    "details": "Red",
    "composition": "Sweet",
    "modelDetails": [
        "Red",
        "Yellow",
        "Green"
    ],
    "images": [
        "http://cdn.test.biz/42/42266674ce_12n_f.jpg",
        "http://cdn.test.biz/42/42266674ce_12n_r.jpg",
        "http://cdn.test.biz/42/42266674ce_12n_e.jpg",
        "http://cdn.test.biz/42/42266674ce_12n_d.jpg"
    ]
}
}

second.json

{
"item": {
    "name": "Fill",
    "details": "Black",
    "composition": "Hard",
    "modelDetails": [
        "Red",
        "Yellow",
        "Green"
    ],
    "images": [
        "http://cdn.test.biz/42/42266674ce_12n_d.jpg",
        "http://cdn.test.biz/42/42266674ce_12n_s.jpg",
        "http://cdn.test.biz/42/42266674ce_12n_f.jpg",
        "http://cdn.test.biz/42/42266674ce_12n_v.jpg"
    ]
}
}

可以使用jQuery或Angular吗？我试过这个：

<ul>
<li ng-repeat="x in names">
{{ x.Name }}
</li>
<li ng-repeat="x in names">
{{ x.Details }}
</li>
<li ng-repeat="x in names">
{{ x.Composizione }}
</li>
<li ng-repeat="x in names">
{{ x.moreDetails }}
</li>
<li ng-repeat="x in names">
{{ x.photo1 }}
</li>
</ul>

</div>
                        </div>
                        <script>
function customersController($scope,$http) {
$http.get("assets/data/five.json")

.success(function(response) {$scope.names = response;});
}
</script>
</div>

...但我的图片加载有问题...我想象文本网址而不是真实图像......

Answer 1

使用此

var firstJson='first.json' // and full path
 $.getJSON(firstJsonPath, function (data) {

jQuery('.box1').html(JSON.stringify(data)); // for example

    });

var secontJson='second.json' // and full path
 $.getJSON(secontJson, function (data) {

jQuery('.box2').html(JSON.stringify(data)); // for example


    });

Answer 2

为什么不为每个div定义2个控制器，并使用相应的工厂获取json。或者如果您只想拥有一个控制器，则可以获取json并将其分配给此控制器的$ scope中的不同模型。如

$scope.first  = parsedJsonData1
$scope.second = parsedJsonData2

在您的div中，您可以使用ng-repeat来迭代每个模型数据

..但我的图像加载有问题...我想象文本网址而不是真实图像。

因为你必须渲染一个图像标签，它使用你的模型data.attribute作为url 尝试类似的东西（假设photo1包含网址）：

 <img ng-src="{{x.photo1}}"/>

在2个不同的div上加载JSON数据

2 个答案: