splitting json object into an array, and assign other objects to each of them

Question

Original Fiddle using the first JSON file

Failed Fiddle using the second JSON file.

I have trouble using split and $.each function to return each small choice from an array.

I'm using a chained select box via AJAX from this site. It requires a markup like this to build chained select boxes:

<select>
    <option value="mustang2000">Ford » Mustang » 2000</option>
    <option value="mustang2005">Ford » Mustang » 2005</option>
    <option value="focus">Ford » Focus » 2010</option>
    <option value="alero">Oldsmobile » Alero » 1993</option>
</select>

Normally, the JSON file for the options would look like this:

First JSON file

[
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "football"
  },
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "basketball"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "MMA"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "wrestling"
  }
]

I want to stuff all the choices of the same category into one big choice using "|" as separators, like this:

Second JSON file

[
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "football|basketball"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "wrestling|racing"
  }
]

and in the script use split and $.each function to return each small choice

  $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FqMlPxn%22&format=json&diagnostics=true&callback=", 
        success: function(data){
               var $select = $('select');var $option="";

        $.each(data.query.results.json.json, function (index, i) {

          smallchoice = i.choice.split(',');
        $.each(smallchoice,function(i,smallchoice){
         $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
       });

           $select.append($option); 
          });


        $select.dynamicDropdown({"delimiter":"@"});
    } 
   });

But I have no idea how to assign bigcat and cat to each small choice. Can anyone give me suggestions?

In fact if you just specify that the dataType is json it will parse it for you so your data is an object. — Liam
– Liam, Commented Jul 8, 2014 at 12:49
Also, one thing I noticed, is that you need to be careful with the names of your variable and closures... especially function(i,smallchoice)when you had already declared the same variables few lines above. Change that for something else, like function(j, choice) and already I see something that's not "undefined" — lcoderre
– lcoderre, Commented Jul 8, 2014 at 12:59

Nzall · Accepted Answer · 2014-07-08 13:08:36Z

4

You're trying to manually parse your Json object. This is not needed with Jquery. Jquery has a built-in parseJson() method that can turn a well-formed json object into a javascript Object. Alternatively, as Liam recommends, you can also specify in your $.ajax() options that the dataType is json, which will automatically parse the resulting data response to an object.

You can then also use an array["wrestling","racing"] instead of a |-delimited list for your choice. These 2 methods combined can help you a lot and simplify your code.

so to summarize: add dataType:"json", to your ajax options and use an array to store choice instead of a delimited list.

(update from comment as suggested by meta).

answered Jul 8, 2014 at 13:08

Nzall

3,5855 gold badges36 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

splitting json object into an array, and assign other objects to each of them

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related