如何用相同 object javascript 的另一個值更改值

Question

我有一個 JSON 文件，我想通過單擊名稱來獲取它的 ID

      [ 
        { ""      : 1
        , "id"    : 201610501
        , "name"  : "MainMenu"
        , "parent": null
        } 
      , 
        { ""      : 2
        , "id"    : "201610501*"
        , "name"  : "(*) Repeat"
        , "parent": 201610501
        } 
      ] 

and im fetching it like this

    fetch('https://uccx116p.ef.com:8445/3rdpartygadget/files/JSON_files/Retailer_UC_1.json')
            .then(res => res.json())
            .then(data => {
                console.log(data)
        
                document.querySelector("#app").innerHTML = data.map(user => {
                    return `<li id="list" onclick="openMessageBox(this)" ><a  href="#"> ${user.name}</a> 
      </li>
                    `
        
        
                })
            })
            .catch(() => console.log('cant'))
        }
    openMessageBox = function(el){
            var name =el.textContent
            console.log(name);

現在點擊名字我得到它的名字，但我想把它改成它的 id 我該怎么做？

Answer 1

試試下面的代碼

function openMessageBox(item){
alert(item);
}
function process() {
var data = [
    { "a": 1, id: 201610501, name: "MainMenu", parent: null },
    { "a": 2, id: "201610502", name: "(*) Repeat", parent: 201610501 }
  ];
  document.querySelector("#demo").innerHTML = data.map(user => {
                    return `<li id="list" onclick="openMessageBox(${user.id})" ><a  href="#"> ${user.name}</a> 
      </li>`;})
}

檢查這個

Answer 2

讓我用無點來清理你的代碼：

const app = document.querySelector("#app");
   
const openMessageBox = (el, id, name) => { /* do stuff... */ }
   
const usersToListItems = userList => userList.map(user => 
    `<li class="list" onclick="() => {openMessageBox(this, ${user.id}, ${user.name});}" >
        <a  href="#">${user.name}</a>
     </li>`
).join('\n');
    
const toJson = res => res.json();
  
fetch('http:// ...')
    .then(toJson)
    .then(usersToListItems)
    .then(items => { app.innerHTML = items; })
    .catch(console.warn);

尚未測試，但我相信這可以工作。

對邏輯最重要的更改是將 onClick function 更改為箭頭 function （防止立即調用），這樣您就可以在不調用它的情況下傳遞參數。 所以我將元素、id 和名稱作為參數傳遞。 現在您可以隨心所欲地使用它。

將 li 中的 id 更改為 class 因為 id 必須是唯一的。

rest 只是重構，因此您可以更容易閱讀代碼來處理...

現在你可以做類似el.querySelector('a').innerHtml = id; 或類似openMessageBox里面的東西......