Question

Basically I'm trying to determine whether server returned json or just string

and then convert that json and display its every element in loop or just display that one string.

I'd want to reach something like that:

Send post request with some data
If post bodyText contains { and } then parse it as json and draw <li> in html

else

just print bodyText.

new Vue({
    el: '#app',
    data: {

            user: {
                UserLogin: 'test',
                UserEmail: 'test',
                UserPassword: 'test'
            },
            responseArr: []
        },
    methods: {
        submit() {
            this.$http.post('http://api.com/validate', this.user)
            .then(response => {
                return "OK";
            },
            error => {  
                    return error.bodyText; 
            })
            .then(data => {
                console.log(data);

                if (data.includes("{")) {
                    console.log("if");
                    data = JSON.parse(data);
                    const arr = [];
                    for (let key in data) {
                        arr.push(data[key]);
                    }
                    this.responseArr = arr;
                }
                else
                {
                    console.log("else");
                    const arr = [];
                    arr.push(data);
                    this.responseArr = arr;
                }
            }
            );
        },
    }
    });

<div id="errorList">
    <li v-for="element in responseArr">
        <div v-if="responseArr.includes('{')">
            <ul class="errorScope">
                <li v-for="nested_element in element">{{nested_element}}</li>
            </ul>
        </div>
        <div v-else>
             <li>{{element}}</li>
        </div>
<button v-on:click="submit">Submit</button>

Answer 1

您可以使用 typeof 运算符来确定某些内容是否为Javascript对象-

let obj = {'age' : 30};
if(typeof obj == "object"){
   // It's object
}else if(typeof obj == 'string'){
   // It's String
}

Answer 2

以下是一种实现方法

// HTML
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <input type="button"
          v-on:click="load()" value="load next">
    <h1 v-if="textResponse">{{textResponse}}</h1>
    <h1 v-if="loadNr==1" style="font-size: 0.8em">click again to load json}</h1>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">
        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

// CSS
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

// JavaScript

const requestText = 'request returned a text response';
const requestJson = '[{"text":"Learn JavaScript","done":false},{"text":"Learn Vue","done":false},{"text":"Play around in JSFiddle","done":true},{"text":"Build something awesome","done":true}]';

new Vue({
  el: "#app",
  data: {
    todos: [],
    textResponse: '',
    loadNr: 0
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
    load: function(){
        let requestResponse;
      this.textResponse = '';
        if (!this.loadNr) {
        // simulate text
        requestResponse = requestText;
      } else {
        //  simulate json
        requestResponse = requestJson;
      }

      let json;
      try {
        if (typeof requestResponse === 'object') {
            //  server sent already parsed json
            this.todos = requestResponse;
        } else {
            //  server sent json string
            this.todos = JSON.parse(requestResponse);
        }
      } catch (error) {
        this.textResponse = requestResponse;
      }
      this.loadNr++;
    }
  }
});

Sample Fiddle

Answer 3

在解析响应之前，响应始终是字符串。问题是您不知道响应是普通字符串，还是打算用作可解析的字符串。因此，您有两个选择。首先，是这样的：

...
.then(response => {
  let type = 'json'
  let data
  try {
    // try to parse the response text
    data = JSON.parse(response)
  } catch {
    // no, response is not parseable
    data = response
    type = 'string'
  }
  // here you know the type
  // and your data are prepared
})

或者，根据用于$ http调用的库，您还有第二个选择。也许这个库可以告诉您响应类型，而它是'text / plain'或'application / json'。

PS：如果不确定响应是否已解析，则可以通过以下方式进行检查：

if (response instanceof Object) {
  // response is already parsed json string,
  // so object or array
} else {
  // response is not parsed,
  // try to parse it or what
}

Determine whether data is json or string and perform logic basing o that

3 个答案: