JSON结构转换为jQuery的angularjs嵌套的JSON结构 [英] convert json structure to nested json structure in jquery angularjs
问题描述
我能知道如何我可以将当前的JSON文件转换为嵌套的JSON结构按下面，我在几个方面（<一个已经试过href=\"http://stackoverflow.com/questions/32579248/how-to-convert-form-input-fields-to-nested-json-structure-using-jquery\">How使用jquery ），以表单的输入域转换为嵌套的JSON结构，但我没有得到它，请帮我，我做错了，这样我们就可以使用NG-重复通过我的视图页面上图片网址值迭代。如果我使用下面，它是不会放弃按我所需的结构。
HTML：＆LT;表ID =控件ID的方法=邮报行动=ENCTYPE =的multipart / form-data的＆GT;
＆LT;输入类型=隐藏值={3D {$指数}}NAME =3D＆GT;
＆LT;输入类型=隐藏值=sliceX {{$指数}}NAME =sliceX＆GT;
＆LT;输入类型=隐藏值=sliceY {{$指数}}NAME =sliceY＆GT;
＆LT;输入类型=隐藏值=sliceZ {{$指数}}NAME =sliceZ＆GT;
＆LT;输入类型=按钮ID =提交按钮值=保存＆GT;
＆LT; /表及GT;jQuery的：$（＃提交按钮）。在（'点击'，功能（E）{
VAR EL = document.querySelectorAll（'＃文本[类型=隐藏]'）;
VAR ARR = [];
变种物镜= {};
VAR推= FALSE;
对于（VAR I = 0; I＆LT; el.length;我++）{
如果（EL [I] .value.indexOf（'/测试/图像'）-1个）{
如果（推）{
arr.push（OBJ）;
物镜= {};
};
obj.name ='图片网址';
obj.value =报[I] .value的;
推= TRUE;
}
obj.parts = obj.parts || [];
obj.parts.push（{
名称：EL [I] .name和
值：EL [I]。价值
}）;
} VAR fileDataToSave = $（OBJ）.serializeArray（）;
VAR jsoncontent = JSON.stringify（fileDataToSave）;
变量$ downloadAnchor = $（＆下;一个/＆gt;中，{
HREF：数据：文本/ JSON的;字符集= UTF-8，'+ jsoncontent，
下载：info.json
}）;
$ downloadAnchor.css（{位置：绝对，左：970像素，顶：258px}）;
$ downloadAnchor.text（点击此处下载JSON）;
$（形式）追加（$ downloadAnchor）。
亦即preventDefault（）;
返回false;
}）;
目前的JSON：
<$p$p><$c$c>[{\"name\":\"imageurl\",\"value\":\"/tests/images/Image1.nii\"},{\"name\":\"3d\",\"value\":\"3d0\"},{\"name\":\"sliceX\",\"value\":\"sliceX0\"},{\"name\":\"sliceY\",\"value\":\"sliceY0\"},{\"name\":\"sliceZ\",\"value\":\"sliceZ0\"},{\"name\":\"imageurl\",\"value\":\"/tests/images/Image2.nii\"},{\"name\":\"3d\",\"value\":\"3d1\"},{\"name\":\"sliceX\",\"value\":\"sliceX1\"},{\"name\":\"sliceY\",\"value\":\"sliceY1\"},{\"name\":\"sliceZ\",\"value\":\"sliceZ1\"}]``期望的JSON结构：`[{名：图片网址，值：/测试/ Image1.nii部分：
{名：3D，值：3D0}，
{名：sliceX，值：sliceX0}，
{名：sliceY，值：sliceY0}，
{名：sliceZ，值：sliceZ0}，
]}， {名：图片网址，值：/测试/ Image2.nii部分：
{名：3D，值：3D1}，
{名：sliceX，值：sliceX1}，
{名：sliceY，值：sliceY1}，
{名：sliceZ，值：sliceZ1}
]}
]
纯JavaScript解决方案。
VAR JSON; //您当前的JSON对象
变种newJson = [];对于（VAR I = 0; I＆LT; json.length;我++）{
VAR节点;
如果（JSON [我]。名称===图片网址）{
节点= json的[I]
VAR部分= [];
对于（VAR J = I + 1; J＆LT; json.length; J ++）{
如果（JSON [J]。名称！==图片网址）{
parts.push（JSON [J]）;
}其他{
我=的J - 1;
打破;
}
}
node.parts =部分;
newJson.push（节点）;
}
}
我们简单地遍历所有元素中，找到那些与名称===图片网址和元素的部件添加誓不罢休找到<$ C $新元素C>名称===图片网址。
http://plnkr.co/edit/Y7UtcwHwwo8dfP8ONk9S?p=$p$ PVIEW
Can I know that how can i convert my current json file to nested json structure as per below, I've tried in a couple of ways(How to convert form input fields to nested json structure using jquery), but I'm not getting it, please help me where I am doing wrong, so that we can iterate through imageurl value on my view page using ng-repeat. If I use the below, it is not giving as per my desired structure.
html:
<form id="controlid" method="post" action="" enctype="multipart/form-data" >
<input type="hidden" value="3d{{$index}}" name="3d" >
<input type="hidden" value="sliceX{{$index}}" name="sliceX">
<input type="hidden" value="sliceY{{$index}}" name="sliceY" >
<input type="hidden" value="sliceZ{{$index}}" name="sliceZ">
<input type="button" id="submitButton" value="Save">
</form>
jquery:
$("#submitButton").on('click', function(e) {
var el = document.querySelectorAll('#text [type="hidden"]');
var arr = [];
var obj = {};
var push = false;
for(var i = 0; i < el.length; i ++){
if(el[i].value.indexOf('/tests/images') > -1){
if(push){
arr.push(obj);
obj = {};
};
obj.name = 'imageurl';
obj.value = el[i].value;
push = true;
}
obj.parts = obj.parts || [];
obj.parts.push({
name: el[i].name,
value: el[i].value
});
}
var fileDataToSave = $(obj).serializeArray();
var jsoncontent = JSON.stringify( fileDataToSave );
var $downloadAnchor = $("<a/>", {
href: 'data:text/json;charset=UTF-8,' + jsoncontent,
download: "info.json"
});
$downloadAnchor.css({"position": "absolute", "left": "970px", "top":"258px"});
$downloadAnchor.text("Click here to download JSON");
$("form").append($downloadAnchor);
e.preventDefault();
return false;
});
current json:
[{"name":"imageurl","value":"/tests/images/Image1.nii"},{"name":"3d","value":"3d0"},{"name":"sliceX","value":"sliceX0"},{"name":"sliceY","value":"sliceY0"},{"name":"sliceZ","value":"sliceZ0"},{"name":"imageurl","value":"/tests/images/Image2.nii"},{"name":"3d","value":"3d1"},{"name":"sliceX","value":"sliceX1"},{"name":"sliceY","value":"sliceY1"},{"name":"sliceZ","value":"sliceZ1"}]`
`desired json structure:` [
{"name":"imageurl","value":"/tests/Image1.nii", parts: [
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
]},
{"name":"imageurl","value":"/tests/Image2.nii", parts: [
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]}
]
Pure Javascript solution.
var json; // your current json object
var newJson = [];
for (var i = 0; i < json.length; i++) {
var node;
if (json[i].name === "imageurl") {
node = json[i];
var parts = [];
for (var j = i + 1; j < json.length; j++) {
if (json[j].name !== "imageurl") {
parts.push(json[j]);
} else {
i = j - 1;
break;
}
}
node.parts = parts;
newJson.push(node);
}
}
we simply loop through all elements, find those with name === "imageurl" and add rest of the elements as parts until find new element with name === "imageurl".
http://plnkr.co/edit/Y7UtcwHwwo8dfP8ONk9S?p=preview
这篇关于JSON结构转换为jQuery的angularjs嵌套的JSON结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
