How to access other properties of json object when clicked another item in my select?

get specific value from json
jquery
get value from json object in javascript
how to get specific value from json object in javascript
how to print json object value in javascript
how to get particular value from json in javascript
get specific value from json api
how to get specific data from json

Trying to access some other properties within JSON Objects (data).

Currently accessing the Icon & the name.

Here is the issue..

When selected an item in the select by doing this

$("#newLocation").change(function(e) {
    var select = e.target;
    alert(select.value);
});

It's accessing the value.

Instead of printing out the link which it does now, want to be able to access the object and print out other things like the ACrush

DEMO

The problem is you're separating your data and the DOM, so when you click something and read the value of what was clicked, you're just reading words off the page, you're not reading the data.

What you need to do is get what was clicked, then use that information to find the matching piece of data. Once you have the matching piece of data, you can do whatever you want with it.

Here's my Demo:

First: Add "id" properties to each item.

Second: Use said "id" to easily find that item and get it's information.

$("#newLocation").change(function(e) {
  // get id of what was clicked
  var selected_id = e.target.value; 

  // then use it to find right item`enter code here`
  var selected_item = items.find(function(item){
    return item.id === selected_id; 
  }); 

  // can now access any property
  alert(selected_item.MagicDamage); 
});

JS Fiddle

Trying to access some other properties within JSON Objects (data). Currently accessing the Icon & the name. Here is the issue.. When selected an item in the  JSON objects are surrounded by curly braces {}. JSON objects are written in key/value pairs. Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null). Keys and values are separated by a colon. Each key/value pair is separated by a comma. Values in a JSON object can be another JSON object.

Use JSON.stringify() when you set the attribute value and use JSON.parse() to get back the object. Then you can access whatever property of the object you want to access.

$.each(items, function (index) {
    $('#newLocation')
        .append($("<option></option>")
        .attr("value", JSON.stringify(items[index]))
        .text(items[index].Name));
});

$("#newLocation").change(function(e) {
    var select = e.target;
    alert(JSON.parse(select.value).ACrush);
});

Take a look at this updated fiddle: http://jsfiddle.net/ymsq1uoy/93/

You need to use dot notation and JavaScript to access the JSON values you want​. Getting a specific property from a JSON response object; Printing a JSON value to the Instead, you select the exact property you want and pull that out through dot Click the Donate button below to donate any amount through Paypal. This sample gets an object's T:Newtonsoft.Json.Linq.JProperty collection using M:Newtonsoft.Json.Linq.JObject.Properties.

I updated your jsfiddle http://jsfiddle.net/ymsq1uoy/91/ .

You could store the index of the item in <option>'s value and use it back when you change the <select> to reach the sub items , otherwise you may store the needed attribute in <option> and get it back onChange , something like <option ACrush='..' . The first approach is better though .

Create a new jQuery object with elements added to the set of matched elements. Selects elements that have the specified attribute with a value either equal to a Bind an event handler to the “click” JavaScript event, or trigger that event on an A collection of properties that represent the presence of different browser  Thanks mate . I needed to add items to JSON object in a for loop. So this works too thanks . events[i] = checks[i].value; // assuming [i] is the iterator console.log(events.json); // prints

You can use $.grep() to filter your object and get any property from there,

var items =[];

$(document).ready(function(){
var data = {
    "ItemMode": [
      {
        "Icon": "https://vignette.wikia.nocookie.net/2007scape/images/a/ad/Adamant_arrow_1.png/revision/latest?cb=20180212230525",
        "Name": "Adamant arrow",
        "AStab": "+0",
        "ASlash": "+0",
        "ACrush": "+0",
        "AMagic": "+0",
        "ARange": "+0",
        "DStab": "+0",
        "DSlash": "+0",
        "DCrush": "+0",
        "DMagic": "+0",
        "DRange": "+0",
        "MeleeStrength": "+0",
        "RangedStrength": "+31",
        "MagicDamage": "+0%",
        "Prayer": "+0",
        "Undead": "0",
        "Slayer": "0"
      },
      {
        "Icon": "https://vignette.wikia.nocookie.net/2007scape/images/d/d5/Adamant_bolts_1.png/revision/latest?cb=20170914022209",
        "Name": "Adamant bolts",
        "AStab": "+0",
        "ASlash": "+0",
        "ACrush": "+0",
        "AMagic": "+0",
        "ARange": "+0",
        "DStab": "+0",
        "DSlash": "+0",
        "DCrush": "+0",
        "DMagic": "+0",
        "DRange": "+0",
        "MeleeStrength": "+0",
        "RangedStrength": "+100",
        "MagicDamage": "+0%",
        "Prayer": "+0",
        "Undead": "0",
        "Slayer": "0"
      }
]};
items = data.ItemMode;
$.each(items, function (index) {
    $('#newLocation')
        .append($("<option></option>")
        .attr("value", items[index].Name)
        .text(items[index].Name));
});
});


$("#newLocation").change(function() {
        var val =  $(this).val();
    var selectedItem =  $.grep(items, function(element, index){
         return element["Name"] == val; 
    });
    // You can get anyting 
    alert(selectedItem[0].ASlash);
    alert(selectedItem[0].Icon);
});

Check my fiddle here

The $.map() method applies a function to each item in an array or object and Array-like objects — those with a .length property and a value on the .length - 1  JSON can actually take the form of any data type that is valid for inclusion inside JSON, not just arrays or objects. So for example, a single string or number would be a valid JSON object. Unlike in JavaScript code in which object properties may be unquoted, in JSON only quoted strings may be used as properties.

The HTML DOM document object is the owner of all other objects in your web page. If you want to access any element in an HTML page, you always start with accessing the element.style.property = new style, Change the style of an HTML element function(){code}, Adding event handler code to an onclick event​  Using the Parse JSON action in Flow. Purging the Schema of unnecessary elements. Preparing the schema to handle different data types. Preparing the schema to handle missing properties. Creating the HTML Table. Setting up columns manually. Using expressions to extract data. Using expressions to handle null values.

SimpleDB works directly with Amazon S3 and Amazon EC2 to provide access to Process, Store Each item can have its own unique set of related attributes. User can select among consistency and eventualconsistency (Vogels, 2013). Flat structure: In case of nested JSON input objects, the deep objects out of packed  If you click the save button, your code will be saved, and you get an URL you can share with others. < p > Access a JSON object using dot notation:

The messages are simple JavaScript objects that can have any set of properties. Click here to visit our frequently asked questions about HTML5 video. When another message is received from the same Debug node, it is automatically If a message property contains a JSON string it must first be parsed to its equivalent  For this example, here is the JSON schema: If you don't have the schema, you can generate that schema from the JSON content, or payload, you're parsing. In the Parse JSON action, select Use sample payload to generate schema. Under Enter or paste a sample JSON payload, provide the JSON content, and then select Done.

Comments
  • What about what @MdHasanIbrahim said? That seems to be what fits me the best
  • Don't get e wrong I really like yours too, seems as if it does the same thing without parsing
  • Using an "id" attribute is industry standard. It's less data for your app or website to have to parse. It's the most efficient. That's why items in grocery stores have IDs, and cars have VIN #'s (ids) and even people have social security numbers (ids). It's the best way to do it. Get the "id", look up the item by id.
  • @MarkDenom this is the right approach to do stuff like this. You should not put so much thing inside the DOM which may cause unnecessary performance issues. My answer was quite a quick fix that solved your need and the way you wanted. But I would suggest you to follow this approach.
  • For a small app, and for learning purposes, it really doesn't matter either way. But I'd argue the "id" approach is cleaner.
  • What if the JSON has a lot of attributes ? What if the JSON is dynamically changing . Storing the whole object in <option>'s value is not the ideal way .
  • What about what @MdHasanIbrahim said? That seems to be what fits me the best
  • @MarkDenom Nope its not unfortunately , As he's storing the entire JSON object inside <option value= . What if the JSON object has a lot of attributes ? Ideally you refer to the object by its index not by repeating it !
  • This is literally the same as vanilla javascripts Array.find() lol
  • @TJBlackman May be. frameworks have own different ways to execute same functions.