Как получить доступ к json child с обещанием .json в Vue.js

Question

Код Vue:

new Vue({
    el: '#v-for-object3',
    data: function () {
        return {
            layers: []
        }
    },
    created() {

        var apiURL = "http://.../layers.json";

        var username = '';
        var password = '';

        fetch(apiURL, {
            method: 'GET',
            headers: new Headers({
                'Authorization': 'Basic ' + btoa(username + ":" + password),
                'Content-Type': 'application/json'
            }),

        })
            .then(res => res.json())
            .then(res => (this.layers = res))
            .catch(error => console.log(error));

    }

})

Формат JSON через URL

layers  
  layer 
    0   
        name    "name1"
        href    "http://tttttttt.json"
    1   
        name    "name2"
        href    "http://iiiiiiii.json"

Консоль печати

{ "layer": 
[ 
{ "name": "name1", "href": "http://tttttttt.json" }, 
{ "name": "name2", "href": "http://iiiiiiii.json" }
 ] }

слои содержат { "layer": [ { "name": "name1", "href": "http:" }, { "name": "name2", "href": "http:" }.. Это не массив ?,как изменить этот код для слоев [] содержит дочерние атрибуты JSON для отображения: например:

<ul id="v-for-object3" class="userWrap">
    <li v-for="(layer, index) in layers" :item="layer" :key="index" class="layer">
        <h2>{{ index }}</h2>
        <span>
            Layer: <strong>{{layer }}</strong>
        </span>
    </li>
</ul>

Как получить доступ к дочернему элементу json с обещанием .json в Vue.js?

Answer 1

Для fetch используйте:

fetch(apiURL, {
  method: 'GET',
  headers: new Headers({
    'Authorization': 'Basic ' + btoa(username + ":" + password),
    'Content-Type': 'application/json'
  }),
})
  .then(res => res.json())
  .then(res => {
    console.log('in fetch callback')
    console.log(res)
    console.log(Object.keys(res))
    console.log(this.layers)
    this.layers = res.layers.layer
    console.log(this.layers)
    console.log(Array.isArray(this.layers))
  })
  .catch(error => console.log(error));

Очевидно, что запись в консоль не требуется, но она должна позволить вам подтвердить, что все работает правильно. Регистрация в начале проверяет значение res. Затем записывается начальное значение this.layers, которое должно быть пустым массивом. Следующее значение должно быть заполненным массивом с 2 элементами. Финальная проверка должна просто записать true, подтверждая, что мы действительно имеем дело с массивом, а не с каким-либо объектом-оболочкой.

Затем для цикла шаблона:

<li v-for="(layer, index) in layers" :key="index" class="layer">
  <h2>{{ index }}</h2>
  <span>
    Layer: <strong>{{ layer.name }}</strong>
  </span>
</li>

У меня естьубрал :item="layer", потому что это ничего не помогало. Я также изменил {{ layer }} на {{ layer.name }}, что также не является обязательным, но, скорее всего, это именно то, что вам действительно нужно.

Фактически код шаблона такой же, как былв оригинальном вопросе. Даже если вы не вносите никаких изменений в шаблон, он должен работать. Тем не менее, важно убедиться, что вы отменили все изменения, внесенные в шаблон с момента публикации вопроса. Если вы объедините все предложения, сделанные в комментариях, они в конечном итоге будут отменены, и это не сработает.

Answer 2

На основании вашего комментария:

"v-for =" (layer, index) in layer ": item =" layer ": key =" index "просто 1 строка со всеми json - bipbip"

Мне кажется, что ответ, который вы получаете от вызова этой конечной точки, возвращает массив с единственным элементом, который содержит объект слоев, который вы описали, поэтому вы видите весь отображаемый объект json. Так что в этом случае это должно исправить:

.then(res => (this.layers = res[0].layer))

Надеюсь, это поможет.