Parsing simple JSON to HTML using Jquery

Question

I have this simple JSON

{"Name":"Srbija","Brands":[{"Name":"Citroen","Models":[]},{"Name":"Dacia","Models":[]},{"Name":"Ford","Models":[]},{"Name":"Hyundai","Models":[]},{"Name":"Kia","Models":[]},{"Name":"Mazda","Models":[]},{"Name":"Nissan","Models":[]},{"Name":"Opel","Models":[]},{"Name":"Peugeot","Models":[]},{"Name":"Renualt","Models":[]},{"Name":"Skoda","Models":[]},{"Name":"Suzuki","Models":[]},{"Name":"Toyota","Models":[]},{"Name":"Volkswagen","Models":[]}]}

What i need is to display Brands name in UL list

This is what i have for now, but i got undefinded

JS

 function countryBrands(data, textStatus, jqXHR){
            console.log(data);
            var output="<ul>";
            for (var i in data) 
            {
                output+="<li>" + data[i].Brands + ",  " + data[i].Name + "</li>";
            }
            output+="</ul>";
            $('#test').html(output);
        }

HTML

<div id="test"></div>

bipen · Accepted Answer · 2017-12-11 08:26:31Z

1

Since Brands is an array loop through Brands and not data.

        console.log(data);
        var output="<ul>";
        for (var i in data.Brands) 
        {
            output+="<li>" + data.Brands[i].Name + ",  " + data.Name + "</li>";
        }
        output+="</ul>";
        $('#test').html(output);

answered Dec 11, 2017 at 8:26

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Miomir Dancevic Over a year ago

Can you help me foreach this json carportal.azurewebsites.net/api/portal/…, i only need model name

bipen Over a year ago

@MiomirDancevic here you go.. jsfiddle.net/bipen/3r6rwuw2/1 ... you have to loop in twice to get that. if for is confusing then use each().

guradio · Accepted Answer · 2017-12-11 08:24:50Z

Use .each() to iterate the data

var data = {
  "Name": "Srbija",
  "Brands": [{
    "Name": "Citroen",
    "Models": []
  }, {
    "Name": "Dacia",
    "Models": []
  }, {
    "Name": "Ford",
    "Models": []
  }, {
    "Name": "Hyundai",
    "Models": []
  }, {
    "Name": "Kia",
    "Models": []
  }, {
    "Name": "Mazda",
    "Models": []
  }, {
    "Name": "Nissan",
    "Models": []
  }, {
    "Name": "Opel",
    "Models": []
  }, {
    "Name": "Peugeot",
    "Models": []
  }, {
    "Name": "Renualt",
    "Models": []
  }, {
    "Name": "Skoda",
    "Models": []
  }, {
    "Name": "Suzuki",
    "Models": []
  }, {
    "Name": "Toyota",
    "Models": []
  }, {
    "Name": "Volkswagen",
    "Models": []
  }]
};


var output = "";
$.each(data.Brands, function(i,v) {

  output += "<li>"+ v.Name + "</li>";

})


output += "</ul>";
$('#test').html(output);

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

Arpit Kumar · Accepted Answer · 2017-12-11 09:40:48Z

0

You can use Array map function too.

answered Dec 11, 2017 at 9:40

Arpit Kumar

916 bronze badges

Collectives™ on Stack Overflow

Parsing simple JSON to HTML using Jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related