get values from json variable data with jquery or javascript

Question

The json output is some thing like: {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1}

I need to do an append with each of the received values. The numbers next to them are how many times they exist.

I know it will probably be something with "for each" value, but, since the values and keys of the json response are variable, it's difficult for me how to figure out the way to do it.

I will like that the append order depends on how big the number is. If it's bigger print it on the top, and so on...

for example:

<div id="values">
  <p>The value "more" is repeated 5 time(s).</p>
  <p>The value "apple" is repeated 3 time(s).</p>
  <p>The value "another" is repeated 1 time(s).</p>
  ...
</div>

Remember! The response can change, the response won't be always apple, another, more, volvo, audi and ford... It can CHANGE!

EDIT: I can do something with this, but, how do I order them with higher or lower values?

for (var key in interests) {
  if (interests.hasOwnProperty(key)) {
    console.log(key + " -> " + interests[key]);
  }
}

EDIT:

var data = {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1}; // initial data
var interestsValue = []; // data with values

for (var key in data){ interestsValue.push({ name: key, value: data[key] }); } // send data with values
interestsValue.sort(function(a, b){ return b.value - a.value; }); // sort values

console.log(interestsValue); // values ordered from bigger to smaller

Did you search a bit ? You just need to loop through an object : stackoverflow.com/questions/684672/… — Antoine Neff
– Antoine Neff, Commented Jan 29, 2017 at 11:08

ymz · Accepted Answer · 2017-01-29 11:11:31Z

1

First - convert the object to a valid array:

var data = {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1};
var arr = [];

for (var key in data)
{
   arr.push({ name: key, value: data[key] });
}

Then.... use that array with jQuery, angular, etc... to populate your elements

Enjoy :)

answered Jan 29, 2017 at 11:11

ymz

6,9641 gold badge26 silver badges41 bronze badges

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

Comments

Hikmat Sijapati · Accepted Answer · 2017-01-29 12:30:01Z

1

Like this.Loop through your objcet using jquery's $.each method Then append the html into your div with append method.

var obj= {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1};

text = "";
$.each(obj,function(index,element){
text +=" <p>The value " +index+ " is repeated "+ element + " time(s).</p>";
});
$("#values").append(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="values">
</div>

JS fiddle https://jsfiddle.net/uobedcf0/

See UPDATED Fiddle:

https://jsfiddle.net/u1kn6d6L/1/

edited Jan 29, 2017 at 12:30

answered Jan 29, 2017 at 11:15

Hikmat Sijapati

6,9691 gold badge11 silver badges19 bronze badges

2 Comments

Hikmat Sijapati Over a year ago

first take every numbers from your object into array.Then sort.Try

Quique Osuna García Over a year ago

hey, I've been trying, I can order them now but I can't append... Here's the jsfiddle, probably is something obvious I don't see... jsfiddle.net/u1kn6d6L

user3755154 · Accepted Answer · 2017-01-29 12:30:31Z

0

As mention above first convert object into the array.

var data = {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1};
function sortByValue (data){
var dataArray=[];
for(var key in data){
dataArray.push({name:key ,value :data[key]});
}
dataArray.sort(function(a,b){return b.value- a.value}); //sort it in descreasing order
return dataArray;
}
var text="";
var objArray = sortByValue(data);
$.each(objArray,function(index,object){
text +=" <p>The value " +object.name+ " is repeated "+ object.value + " time(s).</p>";
});
$("#values").append(text)

edited Jan 29, 2017 at 12:30

answered Jan 29, 2017 at 11:56

user3755154

645 bronze badges

1 Comment

user3755154 Over a year ago

@QuiqueOsunaGarcía replace var ObjArray with var objArray and it will work

Collectives™ on Stack Overflow

get values from json variable data with jquery or javascript

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related