Question

如何组合2个json并一起出现？如果我选择一个有孩子的人（例如单击 MEN 按钮），则将出现 MEN 中的childern。但是，如果元素没有childern，则单击功能无效。

如果我点击后退按钮，它将弹出上一个菜单。

所以，我第一次想提起

MEN
女人
孩子
客户服务
联系

如果我点击“ MEN” 按钮，则会出现

返回
accesoris
关闭
鞋子

如果单击“后退” 按钮，它将返回前1步。像第一次一样不回来。

您可以看到，这是我结合2 json的想象力。我不知道如何结合2 json。也许是这样

$.each(first, second, function(i, value) {

var first = [{
        "id": 1,
        "text": "MEN",
        "children": [{
                "id": 10,
                "text": "back"
            },
            {
                "id": 11,
                "text": "accesoris",
                "children": [{
                        "id": 110,
                        "text": "back"
                    },
                    {
                        "id": 111,
                        "text": "hat",
                    },
                    {
                        "id": 112,
                        "text": "belt",
                    }
                ]
            },
            {
                "id": 12,
                "text": "cloting",
                "children": [{
                        "id": 120,
                        "text": "back"
                    },
                    {
                        "id": 121,
                        "text": "blazer",
                    },
                    {
                        "id": 122,
                        "text": "pants",
                    }
                ]
            },
            {
                "id": 13,
                "text": "shoes",
                "children": [{
                        "id": 130,
                        "text": "back"
                    },
                    {
                        "id": 131,
                        "text": "oxford",
                    },
                    {
                        "id": 132,
                        "text": "chukka",
                    }
                ]
            }
        ]
    },
    {
        "id": 2,
        "text": "WOMEN",
        "children": [{
                "id": 20,
                "text": "back"
            },
            {
                "id": 21,
                "text": "accesoris",
                "children": [{
                        "id": 210,
                        "text": "back"
                    },
                    {
                        "id": 211,
                        "text": "ring",
                    },
                    {
                        "id": 212,
                        "text": "glove",
                    }
                ]
            },
            {
                "id": 22,
                "text": "cloting",
                "children": [{
                        "id": 220,
                        "text": "back"
                    },
                    {
                        "id": 221,
                        "text": "tshirt",
                    },
                    {
                        "id": 222,
                        "text": "dress",
                    }
                ]
            },
            {
                "id": 23,
                "text": "shoes",
                "children": [{
                        "id": 230,
                        "text": "back"
                    },
                    {
                        "id": 231,
                        "text": "sandals",
                    },
                    {
                        "id": 232,
                        "text": "heels",
                    }
                ]
            }
        ]
    },
    {
        "id": 3,
        "text": "KIDS"
    }
]
var second = [{
        "id": 1,
        "text": "Customer Care",
        "children": [{
                "id": 10,
                "text": "back"
            },
            {
                "id": 11,
                "text": "Product Information"
            },
            {
                "id": 12,
                "text": "Payment Information"
            },
            {
                "id": 13,
                "text": "Your Order"
            }]
    },
    {
        "id": 2,
        "text": "Contact",
        "children": [{
                "id": 20,
                "text": "back"
            },
            {
                "id": 21,
                "text": "Careers"
            },
            {
                "id": 22,
                "text": "Affiliates"
            }]
    }
]

// Appears the first time
var text = [];
$.each(first, function(i, value) {
    text += '<a>' + value.text + '</a><br>';
    $('.result').html(text);
});

// Im not sure its correct, because im using first and second together
// var text = [];
// $.each(first, second, function(i, value) {
//     text[i] += '<a>' + value.text + '</a><br>';
//     $('.result').html(text[i]);
// });


// Function if a button is pressed
$(document).click('a', function(e) {
    if ($(this).text() == 'back') {
       // Go back one step, not back to the beginning
    } else {
        // function text() ---->  $('.result').html(text);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result"></div>

Answer 1

如果要将两个数组组合在一起，则可以使用concat。

# Global image: repository: ..ecr..... # Instances nodes: - node1: name: node-1 iP: 1.1.1.1 - node2: name: node-2 iP: 1.1.1.1

Answer 2

so it's a complete solution, unfortunately I lost the habit of coding jQuery, so it's an ES6 solution (which I find really less complicated)

var
  first = [
    { "id": 1,  "text": "MEN", "children": [
      { "id": 10, "text": "back" },
      { "id": 11, "text": "accesoris", "children": [
        { "id": 110, "text": "back" },
        { "id": 111, "text": "hat"  },
        { "id": 112, "text": "belt" }
      ]},
      { "id": 12, "text": "cloting", "children": [
        { "id": 120, "text": "back"   },
        { "id": 121, "text": "blazer" },
        { "id": 122, "text": "pants"  }
      ]},
      { "id": 13, "text": "shoes", "children": [
        { "id": 130, "text": "back"   },
        { "id": 131, "text": "oxford" },
        { "id": 132, "text": "chukka" }
      ]}
    ]},
    { "id": 2, "text": "WOMEN", "children": [
      { "id": 20, "text": "back" },
      { "id": 21, "text": "accesoris", "children": [
        { "id": 210, "text": "back"  },
        { "id": 211, "text": "ring"  },
        { "id": 212, "text": "glove" }
      ]},
      { "id": 22, "text": "cloting", "children": [
        { "id": 220, "text": "back"   },
        { "id": 221, "text": "tshirt" },
        { "id": 222, "text": "dress"  }
      ]},
      { "id": 23, "text": "shoes", "children": [
        { "id": 230, "text": "back"    },
        { "id": 231, "text": "sandals" },
        { "id": 232, "text": "heels"   }
      ]}
    ]},
    { "id": 3, "text": "KIDS" }
  ]
  ,
  second = [
    { "id": 1, "text": "Customer Care", "children": [
      { "id": 10, "text": "back" },
      { "id": 11, "text": "Product Information" },
      { "id": 12, "text": "Payment Information" },
      { "id": 13, "text": "Your Order" }
    ]},
    { "id": 2, "text": "Contact", "children": [
      { "id": 20, "text": "back"    },
      { "id": 21, "text": "Careers" },
      { "id": 22, "text": "Affiliates" }
    ]}
  ];
;

const
  fullList = first.concat(second)
  ,
  myList   = document.querySelector('#my-List')
  ,
  Messager = { 
    _zone : document.getElementById('MsgZone'),
    Text(msg) {
      this._zone.textContent = msg;
      setTimeout(that=>that._zone.textContent='', 900, this);
    }
  };

var
  List_Level   = [],
  current_List = fullList,
  LI_elm       = document.createElement('li');


function ShowList_F()
{
  let
    xList = fullList,
    showingTxt = '';

  List_Level.forEach( x=>{
    showingTxt += ` / ${xList[x].text}`
    xList=xList[x].children
  })

  while( myList.firstChild )
    { myList.removeChild( myList.firstChild ); }

  current_List = xList;

  xList.forEach((e,i)=>{
    let xLI = myList.appendChild(LI_elm.cloneNode(false));
    xLI.dataset.ref = i.toString();
    xLI.textContent = e.text;

    if (e.text==='back') { xLI.className='back' }
  })

  Messager.Text(showingTxt)
}


ShowList_F(); // first attempt


myList.onclick = function(e)
{
  if (!e.target.matches('li')) return;
  e.stopPropagation();

  let xItem = parseInt(e.target.dataset.ref);

  if (e.target.textContent==='back')
  {
    List_Level.pop()
    ShowList_F();
  }
  else if ( 'children' in current_List[ xItem ])
  {
    List_Level.push(xItem);
    ShowList_F();
  }
  else
  {
    Messager.Text('nothing to do with this click')
  }
}

#my-List { cursor: pointer; list-style-type:square }
#MsgZone, .back { font-size: 0.8em; font-style: italic }

<ul id="my-List"></ul>

<div id="MsgZone"></div>

Answer 3

好的，所以这是一个jQuery版本

var
  first = [
    { "id": 1,  "text": "MEN", "children": [
      { "id": 10, "text": "back" },
      { "id": 11, "text": "accesoris", "children": [
        { "id": 110, "text": "back" },
        { "id": 111, "text": "hat"  },
        { "id": 112, "text": "belt" }
      ]},
      { "id": 12, "text": "cloting", "children": [
        { "id": 120, "text": "back"   },
        { "id": 121, "text": "blazer" },
        { "id": 122, "text": "pants"  }
      ]},
      { "id": 13, "text": "shoes", "children": [
        { "id": 130, "text": "back"   },
        { "id": 131, "text": "oxford" },
        { "id": 132, "text": "chukka" }
      ]}
    ]},
    { "id": 2, "text": "WOMEN", "children": [
      { "id": 20, "text": "back" },
      { "id": 21, "text": "accesoris", "children": [
        { "id": 210, "text": "back"  },
        { "id": 211, "text": "ring"  },
        { "id": 212, "text": "glove" }
      ]},
      { "id": 22, "text": "cloting", "children": [
        { "id": 220, "text": "back"   },
        { "id": 221, "text": "tshirt" },
        { "id": 222, "text": "dress"  }
      ]},
      { "id": 23, "text": "shoes", "children": [
        { "id": 230, "text": "back"    },
        { "id": 231, "text": "sandals" },
        { "id": 232, "text": "heels"   }
      ]}
    ]},
    { "id": 3, "text": "KIDS" }
  ]
  ,
  second = [
    { "id": 1, "text": "Customer Care", "children": [
      { "id": 10, "text": "back" },
      { "id": 11, "text": "Product Information" },
      { "id": 12, "text": "Payment Information" },
      { "id": 13, "text": "Your Order" }
    ]},
    { "id": 2, "text": "Contact", "children": [
      { "id": 20, "text": "back"    },
      { "id": 21, "text": "Careers" },
      { "id": 22, "text": "Affiliates" }
    ]}
  ];
;

const
  fullList = first.concat(second) ,
  $myList  = $('#my-List') ;

var
  List_Level   = []       ,
  current_List = fullList ;

function ShowList_F()
{
  let xList = fullList;

  for (let x=0, xMax=List_Level.length; x<xMax; x++)
  {
    xList = xList[ List_Level[x] ].children;
  }

  $myList.empty()

  current_List = xList;

  for (let i=0, iMax=xList.length; i<iMax; i++)
  {
    let aClass = 'levelentry' + (xList[i].hasOwnProperty('children')?' PLUS':'');   // other possibility

    $myList.append( `<li class="root-level"><a class="${aClass}" data-ref="${i}">${xList[i].text}</a></li>`);
  }
}

ShowList_F(); // first attempt


$myList.on( "click", "a", function(e)
{
  e.preventDefault();
  
  let xItem = parseInt( $(this).data('ref') );

  if ($(this).text()==='back')                             // level Up
  {
    List_Level.pop()
    ShowList_F();
  }
  else if (current_List[xItem].hasOwnProperty('children')) // level Down (and same test)
  {
    List_Level.push(xItem);
    ShowList_F();
  }
})

#my-List { cursor: pointer; list-style-type:none }
.PLUS::before { content: '- '}
.PLUS:hover::before { content: '+'}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="my-List"></ul>

如何合并和选择JSON调用？

3 个答案: