解析JSON，浏览器将其视为字符串数组，而不是对象数组

Question

very noob Javascript question I suppose. I'm building a demo where I'm parsing some SQL output from an API and would like to present this on a website. However, I'm struggling to parse the output and I'm not sure what I'm doing wrong.
I've got this in my index.html.js :

const app = new Vue({
    el: '#app',
    data() { 
        return {
            stocks: []
        }
    },
    methods: {
        async getStocks() {
            try {
                const apiUrl = `${getAPIBaseUrl()}/api/getStocks`;
                const response = await axios.get(apiUrl);
                app.stocks = JSON.parse(JSON.stringify(response.data));
            } catch (ex) {
                console.error(ex);
            }
        }
    },
    created() {
        this.getStocks();
    }
});

In my index.html I have this here:

<div id="app" class="container">
        <h1 class="title">Stocks</h1>
        <div id="stocks">
            <div v-for="stock in stocks" class="stock">
                <transition name="fade" mode="out-in">
                    <div class="list-item" :key="stock.price">
                        <div class="lead">{{ stock.id }}: ${{ stock.price }}</div>
                    </div>
                </transition>
            </div>
        </div>
    </div>

However, stock.id and stock.price don't seem to get parsed. stock seems to just be a string, not a JSON object.
Debugging the app I can see the following as my data.

Array(5) [ "{\"id\": \"amzn\", \"price\": 1785.6600341796875, \"_attachments\": \"attachments/\"}", "{\"id\": \"msft\", \"price\": 138.42999267578125, \"_attachments\": \"attachments/\"}", "{\"id\": \"googl\", \"price\": 1244.280029296875, \"_attachments\": \"attachments/\"}", "{\"id\": \"ba\", \"price\": 331.05999755859375, \"_attachments\": \"attachments/\"}", "{\"id\": \"air.pa\", \"price\": 122, \"_attachments\": \"attachments/\"}" ]

So the browser sees it as an array, but rather an array of strings it seems, not an array of JSON objects.
How do I fix this?

Answer 1

Just to understand where exactly you have to do the modification and what little mistake you did has already been pointed out in the above comments.

> var arr = [ "{\"id\": \"amzn\", \"price\": 1785.6600341796875, \"_attachments\": \"attachments/\"}", "{\"id\": \"msft\", \"price\": 138.42999267578125, \"_attachments\": \"attachments/\"}", "{\"id\": \"googl\", \"price\": 1244.280029296875, \"_attachments\": \"attachments/\"}", "{\"id\": \"ba\", \"price\": 331.05999755859375, \"_attachments\": \"attachments/\"}", "{\"id\": \"air.pa\", \"price\": 122, \"_attachments\": \"attachments/\"}" ]
undefined
> 
> item0 = arr[0]
'{"id": "amzn", "price": 1785.6600341796875, "_attachments": "attachments/"}'
> 
> item0Obj = JSON.parse(item0)
{ id: 'amzn', price: 1785.6600341796875, _attachments: 'attachments/' }
> 
> item0Obj.id
'amzn'
> item0Obj.price
1785.6600341796875
> item0Obj._attachments
'attachments/'
> 

And finally, let's do it for all.

> // Do it for all
undefined
> newArr = arr.map((str) => JSON.parse(str))
[
  {
    id: 'amzn',
    price: 1785.6600341796875,
    _attachments: 'attachments/'
  },
  {
    id: 'msft',
    price: 138.42999267578125,
    _attachments: 'attachments/'
  },
  {
    id: 'googl',
    price: 1244.280029296875,
    _attachments: 'attachments/'
  },
  { id: 'ba', price: 331.05999755859375, _attachments: 'attachments/' },
  { id: 'air.pa', price: 122, _attachments: 'attachments/' }
]
> 

After that you will have an access to inner elements of array.

> // List out all prices
undefined
> for(let obj of newArr) {
... console.log(obj.price) // obj["price"] can also be used here
... }
1785.6600341796875
138.42999267578125
1244.280029296875
331.05999755859375
122
undefined
> 
> for(let obj of newArr) {
... console.log(obj["price"]) // obj.price can also be used here
... }
1785.6600341796875
138.42999267578125
1244.280029296875
331.05999755859375
122
undefined
> 

So just check the response.data and its type using console.log(response.data, typeof response.data) and take below decisions.

If

• response.data is something like ["{\"k\": \"v\"}", "\"k2\": \"v2\""] as you are printing then you have to use app.stocks = response.data.map((obj) => JSON.parse(obj)) .
• response.data is something like [{"k": "v"}, {"k2": "v2"}] then you just need to use app.stocks = response.data (as it's already a list of objects).
• response.data is something like '[{"k": "v"}, "k2": "v2"]' (string) as you are printing then you have to use app.stocks = JSON.parse(response.data) .

Take your decisions properly and think about your response.data , its type may be 'object' | 'string' . And use JSON.parse() to get object form, if any of your list item is in string form.

Answer 2

Problem was that the JSON I received from the server seems to be malformed.
app.stocks = JSON.parse('['+response.data+']');
fixed this.