How to change value with another value of same object javascript

Question

I have a JSON file and i want to get its id by clicking on name

      [ 
        { ""      : 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);

Right now on clicking the name im getting its name but I want to change it into its id how can I do that?

Jobelle · Accepted Answer · 2021-02-10 05:31:17Z

1

Try the below code

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>`;})
}

Check this

edited Feb 10, 2021 at 5:31

answered Feb 10, 2021 at 3:53

Jobelle

2,8441 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Rufaida Shafiq Over a year ago

Hey thanks alot but i want ids in the replacement of name on clicking i can use .replace method in javvascript but its returning all the ids i want the id of the specific name in the same object

Jobelle Over a year ago

@RufaidaShafiq Which selected item?

Rufaida Shafiq Over a year ago

the id we are getting on alert i have store it in a variable now i have a cancel button and want to delete that selected id

Jobelle Over a year ago

@RufaidaShafiq clear that variable on cancel function.

Rufaida Shafiq Over a year ago

openMessageBox = function(id){ updateCallVariable('callVariable1',id ) } its a function actually having parameters name and value i have given id as a value in it now how can i clear this in cancel function?

|

repeatdomiau · Accepted Answer · 2021-02-10 05:04:18Z

0

Let me clean your code a little bit using point-free:

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);

Haven't tested but I believe this could work.

The most important change to the logic was changing the onClick function to became an arrow function (preventing imediate call), that way you can pass parameters without invoking it. So I passed the element, id and name as parameters. Now you can use it as you like.

Changed your id inside li to a class because id must be unique.

The rest was just refactoring so you can have a easier to read code to deal with...

Now you can do something like el.querySelector('a').innerHtml = id; or something like that inside openMessageBox...

edited Feb 10, 2021 at 5:04

answered Feb 10, 2021 at 4:52

repeatdomiau

9017 silver badges13 bronze badges

1 Comment

Rufaida Shafiq Over a year ago

Thanks its not getting openMessageBox as an arrow function

Collectives™ on Stack Overflow

How to change value with another value of same object javascript

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related