如何用相同 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里面的东西......