1

I want to create a car model using this json endpoint.

How can I create a car object, and then give each car object a set of consistent properties?

What I have here: Wrong output, you will see lots of "undefined" because its looping the entire JSON string and there are 6 items that are not the items in the 3 variables that we are asking for.

Sorry, I'm not quite familiar with this.

Demo

    $.get( "series-data.json", function( obj ) {
      for(x in obj.data.series){
        var series_icon = obj.data.series[x].series_icon;
        var display_order = obj.data.series[x].display_order;
        var brand = obj.data.series[x].brand;

        var html = "<ul>";
          html += "<li>"+ series_icon +"</li>";
          html += "<li>"+ display_order +"</li>";
          html += "<li>"+ brand +"</li>";
          html += "</ul>";

        $('#output').append(html);
      }
    });
DDfrontenderLover
  • 470
  • 1
  • 6
  • 23
  • Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) – Liam Nov 10 '17 at 13:28
  • Your code is OK. Just wrap the statements nested in for loop, with this condition: `if (obj.data.series[x].series_icon)`. –  Nov 10 '17 at 14:30

6 Answers6

1

Here you go with a solution

$.get("http://pdi.bmw.staging.oliver.solutions/data/series-data.json", function(obj) {
  for (x in obj.data.series) {   
    if(typeof obj.data.series[x].series_icon != "undefined"){
     $('#output').append(`<ul>
        <li>${obj.data.series[x].series_icon}</li>
        <li>${obj.data.series[x].display_order}</li>
        <li>${obj.data.series[x].brand}</li>
      </ul>`);
    }  
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

I've used ES6 template literals

If you don't want to use ES6 template literals then try the below code

$.get("http://pdi.bmw.staging.oliver.solutions/data/series-data.json", function(obj) {
  for (x in obj.data.series) {   
    if(typeof obj.data.series[x].series_icon != "undefined"){
     $('#output').append("<ul>" + 
        "<li>" + obj.data.series[x].series_icon + "</li>" +
        "<li>" + obj.data.series[x].display_order + "</li>" +
        "<li>" + obj.data.series[x].brand + "</li>" +
      "</ul>");
    }  
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

Hope this will help you.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
  • @user3699998 Here you go with an updated solution http://fiddle.jshell.net/80cb506f/4/ – Shiladitya Nov 10 '17 at 14:39
  • that's great thanks, is it possible also for the images? – DDfrontenderLover Nov 10 '17 at 14:44
  • I've got locally all the jpgs only for now. – DDfrontenderLover Nov 10 '17 at 14:45
  • @user3699998 Please share how you got other images, I will update on the same code. – Shiladitya Nov 10 '17 at 15:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158706/discussion-between-user3699998-and-shiladitya). – DDfrontenderLover Nov 10 '17 at 15:17