获取 JSON 中的二级数组答案

【问题标题】：Get to second level array in JSON获取 JSON 中的二级数组
【发布时间】：2021-02-09 21:57:05
【问题描述】：

我更像是一名设计师，而不是一名程序员，因此非常感谢任何帮助。 The idea behind this project is to generate a dropdown menu using the "name" from the data json and when selected the "stock" information will appear as well.我已经能够找到“名称”：“Pantone 12345”，但是当我尝试访问我得到的股票名称时，错误提示找不到属性“名称”

这是我的 json

var data = 

[
    {   "id":"Pantone 12345",
        "name":"Pantone 12345",
        "stocks": 
                
                        [
                            {"name": "SG123345", "catagory":"Semigloss","pantoneMatch": true},
                            {"name": "SP9383834", "catagory":"SilverMax","pantoneMatch": false},
                        ]
        
    },
    {   "id":"Pantone 9786754",
        "name":"Pantone 9786754",
        "stocks": 
                        [
                            {"name": "SG123345", "catagory":"Semigloss","pantoneMatch": true},
                            {"name": "SP9383834", "catagory":"SilverMax","pantoneMatch": false},
                        ]

    }


]

这是我用来创建下拉菜单的代码

var dataStock = (data.stocks.name)
                console.log(dataStock)
                $.each(data, function(i, option){
                    console.log(option)
                    $('#pantoneSelect').append($('<option>').attr("value", option.id).text(option.name));
                })

var dataStock 出错，因为我无法获取股票名称。

【问题讨论】：

data 是一个数组.. 有 2 个东西.. data[0].stocks.name 或 data[1].stocks.name
让我添加我需要的示例。当用户从股票数组中选择 Pantone 12345 时，需要将该颜色添加为文本。当用户选择不同的 pantone 颜色时，需要将新的颜色库存数组添加为文本。每个库存商品的 id 是否应该与 pantone 的 id 相匹配？这会让事情变得更容易吗？

标签： javascript jquery arrays json

【解决方案1】：

这样吗？

const data = 
  [ { id   : 'Pantone 12345'
    , name : 'Pantone 12345'
    , stocks: 
      [ { name: 'SG123345',  catagory: 'Semigloss', pantoneMatch: true  } 
      , { name: 'SP9383834', catagory: 'SilverMax', pantoneMatch: false } 
      ] 
    }  
  , { id   : 'Pantone 9786754'
    , name : 'Pantone 9786754' 
    , stocks: 
      [ { name: 'SG123345',  catagory: 'Semigloss', pantoneMatch: true  } 
      , { name: 'SP9383834', catagory: 'SilverMax', pantoneMatch: false } 
  ] } ] 

const myForm = document.forms['my-form']

for (let pantone of data) 
for (let stock of (pantone?.stocks || []))
  {
  myForm.pantoneSelect.add( new Option( stock.name, `${pantone.id}|${stock.name}`))
  }

myForm.onsubmit = e =>
  {
  e.preventDefault()

  if (myForm.pantoneSelect.value != '')
    {
    let [id,stockName] = myForm.pantoneSelect.value.split('|')
      , dataRow        = data.find(x=>x.id === id)
      , stockRow       = dataRow.stocks.find(x=>x.name===stockName)
      ;
    console.clear()
    console.log( `data-id=${dataRow.id}, data-Name=${dataRow.name}` )
    console.log( `stock=${JSON.stringify(stockRow)}` )
    }  
  }

.as-console-row::after  { display:none !important; }

<form action="" name="my-form">

  <select name="pantoneSelect">
    <option selected disabled value="">pick one pantone</option>
  </select>
  <button type="submit">submit</button>
</form>

【讨论】：

我认为你在正确的轨道上，但是当我尝试运行它时，'pantoneSelect' 出现错误“未捕获的 TypeError：无法读取 test.js:21 处未定义的属性 'pantoneSelect' "
我确实注意到了这一点。可能是因为我将 js 作为我导入的不同文件吗？我没有更改您的代码，只是将其粘贴进去看看会发生什么，我得到的唯一错误是 pantoneSelect 错误
是的，HTML 表单被命名为“my-form”以匹配 document.forms['my-form]
我确定它很简单，我只是看不到它。感谢您的帮助
@Spark85 您是否将您的 js <script> ... </script> 正确放置在结束正文标记 </body> 之前？

【解决方案2】：

您的 JSON 中有一组对象，因此您希望适当地转换代码。您的 stocks 也是一个对象数组，因此您需要相应地进行调整。尝试循环遍历每个

var names = [];
for (var a = 0; a < data.length; a++) {
    var stocks = data[a].stocks;
    for (var b = 0; b < stocks.length; b++) {
        var name = stocks[b].name; //Here is each name you're looking for
    }
    var id = data[a].id;
    var name = data[a].name; //Here's the name attribute in the top level object
    //Here you can add a new option element to your select
}

【讨论】：

这很接近，但现在它将添加整个 json 中的所有股票。我只需要从下拉列表中选择的特定 pantone 颜色的库存。我在 'var name = stock[b].name;' 之后添加了 '$('#pantoneStockContainer').append("
" + name + "
")'并显示数据库中的所有股票

【解决方案3】：

你必须深挖两层。然后用第一层抓取id，第二层抓取股票名称：

var data=[{id:"Pantone 12345",name:"Pantone 12345",stocks:[{name:"SG123345",catagory:"Semigloss",pantoneMatch:!0},{name:"SP9383834",catagory:"SilverMax",pantoneMatch:!1}]},{id:"Pantone 9786754",name:"Pantone 9786754",stocks:[{name:"SG123345",catagory:"Semigloss",pantoneMatch:!0},{name:"SP9383834",catagory:"SilverMax",pantoneMatch:!1}]}];

$.each(data, function(i, datum){
  if(datum.stocks){
    $.each(datum.stocks, function(i, stock){
      $('#pantoneSelect').append($('<option>').attr("value", datum.id).text(stock.name));
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pantoneSelect"></select>

【讨论】：