Load JSON data on 2 different divs

Question

i need to load the content of 2 different .json files in 2 different divs.

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

it's possible with jQuery or Angular? I tried with this:

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

...but i have problems with the images load...i visualize the textual url and not the real image...

Answer 1

Use this

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

why not defining 2 controllers one for each div with a respective factory fetching your json. or if you rather want to have only one controller you can fetch the json and assign it to different models in the $scope of this controller. Such as

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

within your divs you can then use ng-repeat to iterate over each models data

..but i have problems with the images load...i visualize the textual url and not the real image.

because you have to render an image tag which uses your models data.attribute as url try something like (given that photo1 contains the url):

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