2014-01-23 3 views
0

Я хотел бы получить значения из файла JSON и вставить в html.Доступ к значению в многомерном массиве JSON с использованием jQuery

на основе этого массива JSON Я пытаюсь тянуть данные вставить в HTML-теги с помощью JQuery и создания страницы:

$.getJSON("/general.json", function(data) { 

var jarray = data; 
for(i = 0; i <=jarray.length; i++){ 
    var project = jarray[i].project; 
    var fulltime = jarray[i].bars.fulltime.resource; 
    var contractor = jarray[i].bars.contractor.resource; 
    var vendor = jarray[i].bars.vendor.resource; 
    var capacity = jarray[i].bars.contractor.resource; 
    var dept = jarray[i].department; 

    jarray.push('<div class = "projects" >'); 
    jarray.push('<div class = "project" >'); 
    jarray.push('<div class = "label" >"'+ project+'"</div>'); 
    jarray.push('<div class = "progress" >'); 
    jarray.push('<span class = "'+ fulltime +'" ></span>'); 
    jarray.push('<span class = "'+ contractor +'" ></span>'); 
    jarray.push('<span class = "'+ vendor +'" ></span>'); 
    jarray.push('<span class = "'+ capacity +'" ></span>'); 
    jarray.push('</div>'); 
    jarray.push('</div>'); 
    jarray.push('</div>'); 

} 

    $('.projects').html(jarray.join('')).appendTo(".department_other > h2"); 

}); , а потому, что массив имеет сложный доступ к желаемым значениям. Было бы оценено любое предложение, спасибо.

+0

Я редактировал структуру JSON и пытается реализовать предложенный код @Pualo Роберто, но до сих пор не могу заставить его работать – IrecoGnizedYou

+0

если вы использовали структуру @PauloRoberto, тогда вам нужно написать 'var jarray = data.jsonArray'. – darthmaim

ответ

0

Прежде всего: назовите своих детей JSON и отца, я исправил ваш JSON, но я дам вам подсказку использовать этот сайт http://json.parser.online.fr/, чтобы управлять JSON и посмотреть, как это.

Во-вторых: НИКОГДА не используйте дочерние имена как номера, как у вас с {"0":{}}, {"1":{}} и т. Д. ВСЕГДА используйте имя или не используйте ничего, как я, поэтому вы можете получить доступ напрямую, иначе вы не сможете.

Третье: если быть точным, сначала подумайте о том, что вы хотите, и разделите его в группах, организованных, прежде чем создавать JSON.

var j = { 
      "jsonArray":[ 
       { 
         "project": "x2 Mobile", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 2 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 1 
          } 
         }, 
         "project": "x2 PC/Web", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 1 
          } 
         }, 
         "project": "x2 Global/STB", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 11 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 3 
          } 
         }, 
         "project": "x3 Mobile/Apps", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 2 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 2 
          } 
         }, 

        "department": "Herrin" 
       }, 
       { 
         "project": "App Icon Strategy", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          } 
         }, 
        "department": "Herrin/Other" 
       }, 
       { 
         "project": "Packaging", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          } 
         }, 
         "project": "Customer Journey", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 1 
          }, 
          "vendor": { 
           "resource": "progress-bar green", 
           "amount": 5 
          } 
         }, 
        "department": "Other" 
       } 
      ] 
}; 

Теперь вы можете получить доступ к этому (к примеру, при условии, что i=0):

for(i=0;i<5;i++){ 
    var project = j.jsonArray[i].project; 
    var fulltime = j.jsonArray[i].bars.fulltime; 
    var resource = j.jsonArray[i].bars.contractor.resource; 
} 
+0

Спасибо, я думаю, это сработает. Я еще раз проверю и опубликую мой рабочий код. – IrecoGnizedYou

+0

Добро пожаловать. –

0

Вы можете получить к ним доступ в своем цикле val.bars.fulltime.resource или data[ i ].bars.fulltime.resource, например.

+0

большое спасибо! – IrecoGnizedYou

0

Оформить заказ с использованием символов подчеркивания (http://underscorejs.org/) или lodash (http://lodash.com/). Вы можете использовать метод .pluck uderscore, чтобы легко получить элементы внутри вашего объекта JSON ...

+0

Джейсон объект. Это ваше! –

+0

спасибо, эти библиотеки действительно были бы полезны – IrecoGnizedYou

Смежные вопросы