Загрузите данные JSON на 2 разных divs

Question

Мне нужно загрузить содержимое двух разных файлов .json в 2 разных div.

<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 или Угловая? Я пытался с этим:

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

... но у меня есть проблемы с нагрузкой изображения ... я визуализации текстовой URL, а не реальное изображение ...

Answer 1

Почему бы не определить 2 контроллера по одному для каждого div с соответствующей фабрикой, получающей ваш json. или если вы предпочитаете иметь только один контроллер, вы можете получить json и присвоить его различным моделям в $ scope этого контроллера. Такие, как

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

в ваших дивы вы можете использовать нг-повтор перебрать каждой модели данных

..но у меня есть проблемы с нагрузкой изображения ... я визуализируют текстуальное URL и а не реальный образ.

, потому что у вас есть, чтобы сделать тег изображения, который использует ваши модели data.attribute в качестве URL попробовать что-то вроде (учитывая, что photo1 содержит URL):

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

Answer 2

Используйте этот

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 


    });