如何从json获取特定的值，并使用angularjs ng-repeat在html中显示 [英] how to get specific value from json and to show in html using angularjs ng-repeat

问题描述

我是angularjs的新手，我正在面临一些问题，从json文件中获取并显示一个特定值，以便在我的视图页面上使用angularjs ng-repeat来为图像源显示。基于这个键/值，我只需要重复json文件，并且需要在我的html页面上显示具体值。

JSON：

  [
 {name：imageurl，value：/ images / Image1.nii}，
 {name：3d，value：3d0}，
 {name：sliceX，value：sliceX0}，
 {name sliceY，value：sliceY0}，
 {name：sliceZ，value：sliceZ0}，
 {name：imageurl，value ：/ images / Image2.nii}，
 {name：3d，value：3d1}，
 {name：sliceX，value ：sliceX1}，
 {name：sliceY，value：sliceY1}，
 {name：sliceZ，value：sliceZ1} 
 
 
 
 $ b $ p 
 $ b 
这里我需要通过key：imageurl来重复显示它的值页。对于第一次迭代，它应该得到第一个imageurl（如：/images/Image1.nii），对于第二次迭代，它应该得到第二个imageurl（如：/images/Image2.nii）值，等等......我'在 FIDDLE 上创建了一个小提琴。请检查一次。所以我想要的输出可能是：
 
 
第一次迭代：
 
 
  < div ng-repeat =item in newArr> 
< div data-imgsrc =/ images / Image1.nii> 
< div id =3d0>< div> 
< div id =sliceX0>< / div> 
< div id =sliceY0>< / div> 
< div id = sliceZ0>< / div> 
< / div> 
< / div> 
  
第二次迭代：
 
 
 < div ng-repeat =item in newArr> 
< div data-imgsrc =/ images / Image2.nii> 
< div id =3d1>< / div> 
< div id =sliceX1>< / div> 
< div id =sliceY1>< / div> 
< div id =sliceZ1>< / div> 
< / div> 
< / div> 
  
请帮助我解决这个问题。提前致谢。 
解决方案
您需要更改数据结构，现在对于您的任务来说没有任何意义。在每个imageurl对象内嵌入3D，X，Y和Z对象会使一切变得非常简单： 
 
 
  [
 {名称：imageurl，value：/ images / Image1.nii，部分：[
 {name：3d，value：3d0}，
 { name：sliceX，value：sliceX0}，
 {name：sliceY，value：sliceY0}，
 {name：sliceZ ，value：sliceZ0}，
]}，
 
 {name：imageurl，value：/ images / Image2.nii [
 {name：3d，value：3d1}，
 {name：sliceX，value：sliceX1}，
 { name：sliceY，value：sliceY1}，
 {name：sliceZ，value：sliceZ1} 
]} 
] 
  
然后你会像这样渲染它：
 < div ng-repeat =newArr中的项目> 
< div data-imgsrc ={{item.value}}> 
< ; div ng-repeat =part in item.partsid ={{part.value}}>< / div> 
< / div> 
< ; / DIV> 
  
 
I am new to angularjs, I am facing some issues on getting and displaying one specific value from json file to show on my view page using angularjs ng-repeat for image source. Based on this key/value only I need to repeat the json file and need to get and display the specific value on my html page.


JSON: 
[
    {"name":"imageurl","value":"/images/Image1.nii"},
    {"name":"3d","value":"3d0"},
    {"name":"sliceX","value":"sliceX0"},
    {"name":"sliceY","value":"sliceY0"},
    {"name":"sliceZ","value":"sliceZ0"},
    {"name":"imageurl","value":"/images/Image2.nii"},
    {"name":"3d","value":"3d1"},
    {"name":"sliceX","value":"sliceX1"},
    {"name":"sliceY","value":"sliceY1"},
    {"name":"sliceZ","value":"sliceZ1"}
]
Here i need to repeat through key: imageurl and to display it's value on my html page. For first iteration, it should get first imageurl(like: /images/Image1.nii), and for second iteration, it should get second imageurl(like: /images/Image2.nii) value, and so on... I've created a fiddle at: FIDDLE . Please check once. So my desired output could be: 

On first iteration: 
<div ng-repeat="item in newArr>     
    <div data-imgsrc="/images/Image1.nii">     
        <div id="3d0"></div>    
        <div id="sliceX0"></div>    
        <div id="sliceY0"></div>    
        <div id="sliceZ0"></div>    
    </div>    
</div>  
on second iteration:
<div ng-repeat="item in newArr>     
    <div data-imgsrc="/images/Image2.nii">     
        <div id="3d1"></div>    
        <div id="sliceX1"></div>    
        <div id="sliceY1"></div>    
        <div id="sliceZ1"></div>
    </div>    
</div>
Please help me regarding this. Thanks in advance. 
解决方案
You need to change data structure, right now it makes little sense for the your task. Nesting 3D, X, Y and Z objects inside each imageurl objects would makes everything very simple:
[
    {"name":"imageurl","value":"/images/Image1.nii", parts: [
        {"name":"3d","value":"3d0"},
        {"name":"sliceX","value":"sliceX0"},
        {"name":"sliceY","value":"sliceY0"},    
        {"name":"sliceZ","value":"sliceZ0"},
    ]},

    {"name":"imageurl","value":"/images/Image2.nii", parts: [
        {"name":"3d","value":"3d1"},
        {"name":"sliceX","value":"sliceX1"},
        {"name":"sliceY","value":"sliceY1"},
        {"name":"sliceZ","value":"sliceZ1"}
    ]}
]
and then you would render it like this:
<div ng-repeat="item in newArr>     
    <div data-imgsrc="{{item.value}}">
        <div ng-repeat="part in item.parts" id="{{part.value}}"></div>
    </div>    
</div>


                        
这篇关于如何从json获取特定的值，并使用angularjs ng-repeat在html中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！