遍歷 javaScript 中的嵌套對象數組

Question

當我加載我的 html 頁面時，我得到了這個返回：

id: country url: http://data:8004/v1/entity/country name: countries 描述: 世界上所有國家

id: states url: http://data:8004/v1/entity/states 名稱：states 數據描述：所有數據的目錄

當我點擊鏈接時，我得到這樣的東西：

id: edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e49
url:http://data:8004/v1/entity/county/edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e49
type: country, 
name: London, 
legal: [object Object]

它不會返回 Legal [{}] 中的數據。

這是 json 的樣子：

[
    {
        "id": "edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e49",
        "url": "http://data:8004/v1/entity/county/edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e499",
        "type": "country",
        "name": "London",
        "legal": [
            {
                "type": "attribution",
                "link": "https://en.wikipedia.org/"
            }
        ]
    },

如何遍歷嵌套數組以訪問和檢索legal[{}] ？ 此外，當我單擊 URL 時，它會返回我的結果，而當我單擊另一個時，它會向下移動先前的結果並將新結果放在頂部而不清除舊結果。 我嘗試使用 ```results.innerHTML=';" 但在加載新結果之前它仍然沒有清除 dom。

這是我的代碼：

const createElement = (tag, ...content) => {
    const el = document.createElement(tag);
    el.append(...content);
    return el;
  };
  
  const setData = (entity) =>{
      console.log(JSON.stringify(entity))
      let entityProps = Object.keys(entity)
      console.log(entityProps)
  const dl = document.createElement('dl');

  entityProps.forEach(function(prop) {
 
    const pre_id =  document.createElement('pre');

    const dt_id =  document.createElement('dt');
    dt_id.textContent = prop;

    pre_id.appendChild(dt_id);
  
    const dd_id =  document.createElement('dd');
    

    if (prop == "url") {
        const link = document.createElement('a');
        link.textContent = entity[prop];
        link.setAttribute('href', '#')
        link.addEventListener('click',function(e) {
      console.log("I'm working!")
      console.log(e.target.innerHTML)
      RetrieveData(e.target.innerHTML)
  });
  dd_id.appendChild(link);

    } else {
        dd_id.textContent = entity[prop];

    }

    pre_id.appendChild(dd_id);
  
    dl.appendChild(pre_id);

    
  });



  return dl;
  
  }

    const results = document.getElementById("results");


function RetrieveData(url){
   
    fetch(url
    , {
        headers:{
      'x-data': '78shjjhsjja-95ff-a6c0396bd619.b77738aa-f798-4bb9-93c4-914c5c83608c',
      'x-access': 'access-data',
      
    },
})
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
  .then((data) => {
    results.append(
        ...data.flatMap((entry) => [
            setData((entry)),
          document.createElement("br"),
          document.createElement("br"),
        ])
      );
  })
  .catch(console.error);
}


const data=document.getElementById("data");

catalog.addEventListener("onclick",  RetrieveData(`http://data:8004/v1/entity/`));

Answer 1

您正在將不是“url”的屬性的值設置為 JS object 的值。這是代碼的相關部分。

 if (prop == "url") {
        const link = document.createElement('a');
        link.textContent = entity[prop];
        link.setAttribute('href', '#')
        link.addEventListener('click',function(e) {
      console.log("I'm working!")
      console.log(e.target.innerHTML)
      RetrieveData(e.target.innerHTML)
  });
  dd_id.appendChild(link);

    } else {
        dd_id.textContent = entity[prop];

    }

你也必須在那里為法律做一個特例，然后你有兩個選擇：

• JSON.stringify legal財產
• 處理 legal 內部的值，就像處理國家/地區一樣

JSON.stringify解決方案的簡單實現：

 if (prop == "url") {
        const link = document.createElement('a');
        link.textContent = entity[prop];
        link.setAttribute('href', '#')
        link.addEventListener('click',function(e) {
          console.log("I'm working!")
          console.log(e.target.innerHTML)
          RetrieveData(e.target.innerHTML)
        });
        dd_id.appendChild(link);

    } if (prop == "legal") {
        dd_id.textContent = JSON.stringify(entity[prop]);
    }else {
        dd_id.textContent = entity[prop];
    }

關於不清除結果，可能是因為您總是在添加新元素，但如果沒有測試環境，則不容易遵循。