Javascript: get object value from Object [closed]

by

Demo: http://jsbin.com/gaxalupuka/edit?html,js,output (click Run with JS button first)

HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button type="button" onclick="showRajatMessages()">Show Rajat Messages</button>
  <ul id="result"></ul>
</body>
</html>

JS:

var data = [
             {name: 'Rajat',
              messages: [
                          {id: 1, message: 'Hello'},
                          {id: 3, message: 'Hello 2'}
                        ]
             },
             {name: 'Himesh',
              messages: [
                          {id: 2,message: 'Hello'}
                        ]
             },
             {name: 'David',
              messages: [
                          {id: 4,message: 'Hello'}
                        ]
             },
              {name: 'Rajat',
              messages: [
                          {id: 1, message: 'Hello 3'},
                          {id: 3, message: 'Hello 4'}
                        ]
             }
            ];


function showRajatMessages() {
  for (i = 0; i < data.length; i++) { 
    if(data[i].name == "Rajat"){
      showMessages(i);
    } else {
      continue; // skip
    }
  }
}

function showMessages(i) {
  console.log(i);
  var messages = data[i].messages;
  for (j = 0; j < messages.length; j++) {
   $("#result").append("<li>" + messages[j].message + "</li>"); 
  }
}

Explanation:

First, we listen for the button click. This button click will run showRajatMessages() function.

Inside showRajatMessages() function, we loop thru the data. If the node has name that equal to Rajat, we’re going to call showMessages() function and pass the object position inside the data array as i.

Inside the showMessages() function, we have access to the i that just passed from the showRajatMessages() function.

So inside here, we find the right object from the data array and grab the messages key.

And for each item inside the messages key, we’ll add the message as <li> and push the <li> into the <ul> with id name result inside the HTML using jQuery .append() method.

More Related Contents:

  1. JS join arrays with replacement
  2. Counting High Quality visitor for ads [closed]
  3. Pass in an array of Deferreds to $.when()
  4. Get a pixel from HTML Canvas?
  5. Date constructor returns NaN in IE, but works in Firefox and Chrome
  6. Link index.html client.js and server.js
  7. Using HTML5 file uploads with AJAX and jQuery
  8. Get Substring between two characters using javascript
  9. Chrome refuses to execute an AJAX script due to wrong MIME type
  10. Axios handling errors
  11. How do I tell if an object is a Promise?
  12. Why does this forEach return undefined when using a return statement
  13. Checking if two Dates have the same date info
  14. How can I update more than 500 docs in Firestore using Batch?
  15. How to implement a pseudo blocking async queue in JS/TS?
  16. GMAIL API for sending Email with attachment
  17. Best JavaScript solution for client-side form validation and interaction? [closed]
  18. Update fields in nested objects in firestore documents?
  19. Can I resize the browser window?
  20. Encoding Javascript Object to Json string
  21. Convert long/lat to pixel x/y on a given picture
  22. Finding matching objects in an array of objects?
  23. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  24. How could others, on a local network, access my NodeJS app while it’s running on my machine?
  25. Is it possible to remove “Inspect Element”?
  26. “unexpected token import” in Nodejs5 and babel?
  27. getSelection & surroundContents across multiple tags
  28. Is there a function, like componentWillUnmount, that will fire before the page is refreshed
  29. Determining Date Equality in Javascript
  30. pipe() and then() documentation vs reality in jQuery 1.8

Leave a Comment